<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0073)http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html -->
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link href="http://feeds2.feedburner.com/Woork" rel="alternate" title="Woork is a popular blog created by Antonio Lupetti. Topics focus on Web Design, Tech News, Resources and Inspiration." type="application/rss+xml">

<script src="./Simple CSS vertical menu Digg-like_files/redirect.js" type="text/javascript"></script>
<script type="text/javascript">try{_mobify("http://woork.mobify.me/");} catch(err) {};</script>

<script type="text/javascript">(function() { var a=window;function c(b){this.t={};this.tick=function(b,i,d){d=void 0!=d?d:(new Date).getTime();this.t[b]=[d,i]};this.tick("start",null,b)}var f=new c;a.jstiming={Timer:c,load:f};try{var g=null;a.chrome&&a.chrome.csi&&(g=Math.floor(a.chrome.csi().pageT));null==g&&a.gtbExternal&&(g=a.gtbExternal.pageT());null==g&&a.external&&(g=a.external.pageT);g&&(a.jstiming.pt=g)}catch(h){};a.tickAboveFold=function(b){var e=0;if(b.offsetParent){do e+=b.offsetTop;while(b=b.offsetParent)}b=e;750>=b&&a.jstiming.load.tick("aft")};var j=!1;function k(){j||(j=!0,a.jstiming.load.tick("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",k,!1):a.attachEvent("onscroll",k);
 })();</script>
<meta content="true" name="MSSmartTagsPreventParsing">
<meta content="blogger" name="generator">
<link href="http://woork.blogspot.com/favicon.ico" rel="icon" type="image/x-icon">
<link href="./Simple CSS vertical menu Digg-like_files/Simple CSS vertical menu Digg-like.htm" rel="canonical">
<link rel="alternate" type="application/atom+xml" title="Woork - Atom" href="http://woork.blogspot.com/feeds/posts/default">
<link rel="alternate" type="application/rss+xml" title="Woork - RSS" href="http://woork.blogspot.com/feeds/posts/default?alt=rss">
<link rel="service.post" type="application/atom+xml" title="Woork - Atom" href="http://www.blogger.com/feeds/8903834426366267848/posts/default">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=8903834426366267848">
<link rel="alternate" type="application/atom+xml" title="Woork - Atom" href="http://woork.blogspot.com/feeds/3245083572946605987/comments/default">
<link rel="image_src" href="http://2.bp.blogspot.com/_TqPdHmAEwTM/R5E6dtOYBmI/AAAAAAAAAts/wAUoo7yJAho/s72-c/menu1.png">
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<title>
Simple CSS vertical menu Digg-like
</title>
<link type="text/css" rel="stylesheet" href="./Simple CSS vertical menu Digg-like_files/1710613946-widget_css_bundle.css">
<link type="text/css" rel="stylesheet" href="./Simple CSS vertical menu Digg-like_files/authorization.css">
<style type="text/css">
#navbar-iframe { display:block }
#b-navbar{white-space:nowrap;color:#fff;height:29px;border-bottom:1px solid #024;background:transparent;font-size:13px;font-family:Arial,Sans-serif}#b-navbar #b-navbar-bg{position:absolute;left:0;top:0;width:100%;height:30px;z-index:-1;background-color:#036;opacity:1.0;filter:alpha(opacity=100)}#b-navbar-fg{padding:4px 1em 3px 0}#b-navbar-controls{margin-left:.2em}#b-navbar #b-navbar-logo{display:block;margin-right:8px;margin-left:8px;width:20px;height:20px;background:url('http://img1.blogblog.com/img/navbar/icons_orange.png') no-repeat -26px 0;cursor:pointer;cursor:hand}#b-navbar #b-query-box{background-color:#fff;margin:0 .5em 0 0;border:1px solid #014;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:0 .3em}#b-navbar #b-query-icon{display:block;width:13px;height:13px;cursor:pointer;cursor:hand;background:url('http://img1.blogblog.com/img/navbar/icons_orange.png') no-repeat 0 0}#b-navbar #b-query-icon:hover{background:url('http://img1.blogblog.com/img/navbar/icons_orange.png') no-repeat -13px 0}#b-navbar #b-query{font-size:13px;color:#000;background-color:transparent;border:none;width:10em;margin:0}#b-navbar .b-link,#b-navbar #b-user{font-size:13px;vertical-align:middle;padding:0 .4em}#b-navbar .b-link{color:#9cf;text-decoration:none;white-space:nowrap;cursor:pointer;cursor:hand}#b-navbar .b-link:hover{color:#fff;text-decoration:underline}#bt-unflag-body{display:none}#flagi,#unflagi{display:none;top:3px;color:#000;background-color:#ff9;border:1px solid #333;z-index:300;padding:4px;font-size:.7em;line-height:.8em}#flagi a,#unflagi a{color:#3366cc;text-decoration:underline}.b-mobile{display:none}#b-sms{margin:0 0 0 100px;padding:4px 7px;line-height:1em;font-size:100%;text-align:left}#b-sms a{margin-right:.5em;line-height:1em}#b-sms a:hover{text-decoration:underline}@media handheld{body .b-mobile{display:block}body #b-navbar-fg,body #flagi,body #unflagi{display:none}}</style>
<style id="page-skin-1" type="text/css"><!--

/*

--></style>
<style type="text/css">
/* -------------------------------- */
/* RESET HTML TAG					*/ 

body {
background:#CCC;
color:#444;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

a:link, a:visited{
color:#185D99;
text-decoration:none;
font-weight: normal;
}
a:hover{text-decoration:underline;}

body{border:0;margin:0;padding:0;}
form{border:0; margin:0;}
form {font-size:12px;}
form, input {padding:0}
h1,h2,h3,h4,h5 {margin:0; border:0; padding:0;}
h2 {font-family:Arial, Helvetica, sans-serif; font-size:24px; padding-bottom:12px; line-height:28px; border-top:solid 2px #DEDEDE; padding-top:14px;}
h2 a:link, h2 a:visited{color:#333; text-decoration:none; font-weight:bold;}
h2 a:hover{color:#000;}
h3 {
font-size:16px; 
line-height:28px; 
color:#232323;
padding-bottom:6px;
}
h3 a:link, h3 a:visited{color:#666; font-size:11px;}

h4{
font-size:12px;
color:#40403b;
margin-bottom:14px;
}
h5{
font-size:14px;
line-height:22px;
display:block;
padding-bottom:10px;
color:#000;
}
blockquote {
margin: 20px; 
padding:0 0 0 14px;	
color: #666; 
border-left: 2px solid #999;
}

ul,li{margin:0; border:0; padding:0;}
ul{margin-bottom:20px;}
li{list-style:none; display:block;}

div.code{font-family:"Courier New", Courier, monospace; font-size:12px; color:#000; border:solid 2px #d7e8f0; background:#f5f8fa; padding:10px; line-height:14px;}

/* -------------------------------- */
/* Header							*/ 

#header {
height:50px;
background: #282828;
}
#header-c{
margin:0 auto; 
width:972px;
height:50px;
background: url(http://lh4.ggpht.com/_TqPdHmAEwTM/SontXb9NKRI/AAAAAAAAFio/hsEhgj81cpY/top-bg.jpg) no-repeat;
}
#header p{border:0; padding:0; margin:0; display:inline; height:50px; line-height:50px;}
#header p.left{width:110px; float:left;}
#header p.right{width:500px; float:right; text-align:right;}
#header p.right a:link, #header p.right a:visited {
color:#555; 
text-decoration:none; 
font-size:14px;
font-weight:bold;
margin-left:14px;
border-bottom:solid 1px #333;
}
#header p.right a:hover {color:#999;}

/* -------------------------------- */
/* Top Section  					*/
#container {
width:936px;
margin:0px auto;
padding:16px;
background:#fff;
}
/* -------------------------------- */
/* Navigation Bar  					*/
#nav-bar {
margin: 0 auto;
background: #EFEFEF;
border-bottom:solid 1px #DEDEDE;
height:57px;
}
#nav-bar-c,
#nav-bar-d{
width:968px;
margin: 0 auto;
height:28px;
clear:both;
background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SrvIvNTmvKI/AAAAAAAAFs4/QVbKm86CYJQ/shadebar.jpg) no-repeat;
}
#nav-bar-d{background:none;}
#nav-bar-c a:link, 
#nav-bar-c a:visited,
#nav-bar-d a:link, 
#nav-bar-d a:visited,
.nav-web,
.nav-tech{
display:block;
float:left;
color:#333;
font-size:11px;
height:28px;
line-height:28px;
padding:0 10px;
font-weight: bold;
text-decoration:none;
}
#nav-bar-d a:link, 
#nav-bar-d a:visited{font-weight:normal;}

#nav-bar-c a:hover{text-decoration:none; color:#E27100;}
#nav-bar-d a:hover{text-decoration:none; color:#00B0CB;}
.nav-web, .nav-tech{width:80px; text-align:center; padding:0;}
.nav-web{background:url(http://lh3.ggpht.com/_TqPdHmAEwTM/SrvPpxTkaxI/AAAAAAAAFtA/vGeYzL686v4/pic-wd.gif) no-repeat; width:76px;}
.nav-tech{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SrvKyC5RMdI/AAAAAAAAFs8/P8OMjQufaVE/pic-news.jpg) no-repeat; width:76px;}

#searchform {
	position: relative;
	height: 41px;
	line-height: 41px;
	overflow: hidden;
	margin-bottom:20px;
}
#search-box, #source-box {
	margin: 0 !important;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	height: 21px;
	border: 1px solid #dadddd;
	color: #484848;
	padding: 9px;
	width: 100% !important;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
#search-submit {
	position: absolute;
	right: 0px;
	top: 0;
	overflow: hidden;
	outline: none !important;
}

#search-submit:active {
	top: -41px;
}

/*IE7 Hacks*/
* html #searchform { padding-bottom:1px; }
* html #search-box { line-height: 1.2em !important; }
* html #search-submit{ top: 1px; }

.moved{border:solid 1px #DEDEDE;
	background:#FFFFCC;
	padding:8px;
	font-size:16px;
	text-align:center;
	font-weight:bold;
	margin-bottom:10px;
}
.dir_ads{
background:#EFEFEF;
text-align:center;
height:123px;
line-height:123px;
font-size:12px;
border:solid 1px #DEDEDE;
text-align:center;
width: 123px;
}
.dir_ads a{font-weight:bold;text-decoration:underline;}
.dir_ads a:hover{
text-decoration:none;
color: #555;
}
.dir_ads-rec{
background:#FFFFCC;
text-align:center;
font-size:12px;
border:solid 1px #DEDEDE;
padding:4px;
text-align:center;
width: 115px;
}
.dir_ads-rec a{
text-decoration:underline;
color:#232323;
font-size:13px;
font-weight:bold;
display:block;
margin-bottom:6px;
}

/* -------------------------------- */
/* Main				  				*/
#main_page {
width:856px; 
padding-top:20px;
background:#FFFFFF; 
}
*html #main_page{overflow:auto;}
/* * html #main {height: 1%;} */
/* -------------------------------- */
/* Left column		  				*/
#main_left {
padding:0 28px 0 0px;
line-height:18px;
}
#main_left em{font-style:normal; background:#fbfbdd;}
/* -------------------------------- */
/* Right column 				*/		
#main_right {
width:354px;
float:left;
font-size:11px;
}
#main_right .section-w{
border:solid 4px #e0dfd0;
border-top:none;
background:#f4f4e9;
padding:14px;
margin-bottom:20px;
}
#main_right .section-w a{text-decoration:underline;}
#main_right .section-w a:hover{text-decoration:none;}

/* -------------------------------- */
/* Sidebar sections					*/

.sidebar_sec{
font-size:11px;
line-height:16px;
padding:6px 0;
margin-bottom:20px;
}
.sidebar_sec li {
padding-bottom:4px;
border-bottom:solid 1px #e0dfd0;
margin-bottom:4px;
}

.sidebar_sec a:link, .sidebar_sec a:visited {text-decoration:none;}

.sidebar_sec li a:hover {text-decoration:underline; color:#555555;}

/* -------------------------------- */
/* List Sections					*/

.list_section{
font-size:12px;
line-height:16px;
margin-bottom:30px;
background-color: #EFEFEF;
padding:10px;
border:solid 1px #DEDEDE;
}
.list_section li {
padding-bottom:6px;
border-bottom:solid 1px #DEDEDE;
margin-bottom:6px;
}

.list_section a:link, .list_section a:visited {text-decoration:none;}
.list_section li a:hover {text-decoration:underline; color:#555555;}
.list_section li:last-child {border: none; padding:0; margin:0;} 

#twitter_update_list li {
padding-bottom:6px;
border-bottom:solid 1px #DEDEDE;
margin-bottom:6px;
}
/* -------------------------------- */
/* Footer							*/
#container-footer{
clear:both;
background:#373737;
}
#footer{
font-size:13px;
color:#FFF;
width:940px;
line-height:22px;
margin:0 auto;		
}
#footer a:link, 
#footer a:visited{
color:#888;
text-decoration:underline;
}
#footer a:hover{text-decoration:none; color:#CCC;}

#footer .central-p{padding:0 20px;}
#footer h1{
margin:10px 0 26px 0;
font-size:18px;
color:#FFF;
border-bottom:solid 2px #444;
padding-bottom:6px;
}
#footer-botton{
padding:10px 0;
border-top:1px solid #444;
margin-top:10px;
font-size:12px;
text-align:center;
}

/* -------------------------------- */
/* BLOGGER ELEMENT 					*/ 

#navbar{display:none; height:0; visibility:hidden;}

.date-header{
color:#999; 
font-size:12px; 
margin-bottom:12px;
padding:0px;
}
.blog-pager{font-size:12px;}
.blog-pager a:link, .blog-pager a:visited{
display:block;
float:left;
padding:6px 10px;
text-align:center;
background:#888;
color:#FFF;
font-size:12px; 
font-weight:bold; 
margin-right:8px;
}
.blog-pager a:hover{
background:#444;
color:#FFF;
}
/* -------------------------------- */
/* Status Messages	 				*/
.status-msg-wrap-n{
padding:0px; 
margin:0; 
}
.status-msg-body-n{
text-align:left;
padding:6px;
background:#FFFFCC;
width:auto;
display:block;
font-size:13px;
margin-bottom:30px;
}
/* -------------------------------- */
/* Post Body		  				*/
.post-body-n {
font-size:13px; 
line-height:20px;
color:#444;
}
.post-body-n a:link, .post-body-n a:visited {text-decoration:underline;}
.post-body-n a:hover{text-decoration:none;}

.post-body-n strong{color:#000;}
/* -------------------------------- */
/* Comments section  				*/ 
.comment_auth{color:#444; font-size:12px; background:#EDEDED; padding:4px; font-weight:bold; text-decoration:none;}
.comment_auth a:link, .comment_auth a:visited, 
.comment_auth a:hover{
font-weight:bold; color:#232323; border-bottom:solid 1px #888; 
padding-bottom:2px; text-decoration:none;} 
.comment-time{font-size:11px; color:#333333;}
.comment-time a:link, .comment-time a:visited {
font-size:11px; color:#999; background:none; width:auto; height:auto;
text-align:left; font-weight:normal;
}
a.comment-link{font-weight: bold;}
dd{margin:0; border:0; padding:0; padding:0 10px;}
dd.comment-body{}
dd.comment-body p{border:0; padding:0; margin:0; padding:10px 0;}
dd.comment-footer{margin-bottom:10px;}

/* -------------------------------- */
/* CUSTOM CLASSES					*/ 

div.spacer{clear:both; height:10px; display:block;}
.b-spacer{clear:both; padding:10px 0; display:block;}

.small-txt{
font-size:11px;
padding-top:6px;
border-top:solid 2px #D1D1D1;
}
.small-txt strong{color:#000; size:11px; line-height:14px;}

.profile_img{float:left; margin:3px 6px 2px 0px; background:#FFF; border:solid 1px #444; padding:3px;}
.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}

.mini-feed{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrVhkTClEUI/AAAAAAAAFqo/v8AYhMipuYU/feed.gif) no-repeat;}
.mini-tweet{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SrVkkLNvMlI/AAAAAAAAFqs/S-UYpTlrZa8/tweet.gif) no-repeat;}
.mini-tech{background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SrVsIDBoz7I/AAAAAAAAFqw/UpGK_0UQUZg/technorati.gif) no-repeat;}
.mini-facebook{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrXQ3G_uRnI/AAAAAAAAFq0/ktY0xwRy4Oo/fb.gif) no-repeat;}
.bottom-share-links{height:40px; clear:both; padding-top:10px;}
.bottom-share-links .mini-feed{float:left; margin-right:16px;}
	
.post-tag{font-size:12px; margin-bottom:10px;}
.post-tag a:link, .post-tag a:visited{color:#666; text-decoration:underline;}
.post-tag a:hover{text-decoration:none;}

.feed-small-right,
.twitter-follow{ 
font-size:11px;
float:right;
font-weight:bold;
line-height:35px;
height:35px;
}
.feed-small-right{margin-right:36px;}
.feed-small-right a:link, 
.feed-small-right a:visited{
	color:#fff;
	font-weight:bold;
}
.twitter-follow {background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SgxdH2E0JsI/AAAAAAAAEDE/HTXaxE7_KaU/twitter.png) right 6px no-repeat;}

.share-delicious{
background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/Sgxdp40mQUI/AAAAAAAAEDM/_Nee9ul6zpc/s128/delicious.png) left top no-repeat;
padding-left:26px;
font-size:11px;
line-height:18px;
float:left;
}
.share-stumble{
background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SgxJoM2788I/AAAAAAAAECk/XpF9W9zOm64/su.png) 10px top no-repeat;
margin-left:10px;
padding-right:10px;
border-left:solid 1px #DEDEDE;
border-right:solid 1px #DEDEDE;
padding-left:36px;
font-size:11px;
line-height:18px;
float:left;
}
.right-social{
margin-left:10px;
font-size:11px;
line-height:28px;
float:right;
}

.big-number {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:20px;
line-height:20px; 
font-weight:bold;
color:#232323;
}


#creditfooter{display:none;}

.s_delicious{
float:right;
line-height:28px;
border:none;
background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/Sgxdp40mQUI/AAAAAAAAEDM/_Nee9ul6zpc/s128/delicious.png) left no-repeat;
padding:0 10px 0 20px;
font-size:12px;
width: auto;
text-align: right;
display: block;
}
.s_delicious a:link, .s_delicious a:visited{
border:none;
text-transform:none;
font-size:12px;
}
.s_delicious b{color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:22px;}

.powered-blogger{
background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SonEZW5u58I/AAAAAAAAFho/CwvJqVEIDdU/powered-by.png) no-repeat; 
height:21px;
line-height:21px;
text-indent:28px;
margin-bottom:10px;
}
.welcome{background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/SomoW4Dl-fI/AAAAAAAAFhg/x_B2bHNOTRI/welcome.png) no-repeat; height:35px;}
.spotlight{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrUygjTcn3I/AAAAAAAAFqM/TshfWp0s1pU/spotlight.jpg) no-repeat; height:35px;}
.micro-subscription{background:url(http://lh3.ggpht.com/_TqPdHmAEwTM/SruVXd--XmI/AAAAAAAAFsQ/16k7sH2O-uc/micro.jpg) no-repeat; height:38px;}
.wnew{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SrU1Wil93AI/AAAAAAAAFqQ/gO4tDKHS2z0/wn.jpg) no-repeat; height:35px;}
.hotlinks{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrU4RRJZGyI/AAAAAAAAFqU/sh1Ob9mFciU/hotlinks.jpg) no-repeat; height:35px;}
.cgoogle{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/SrU70eF6hRI/AAAAAAAAFqc/rrqo1mYYkxI/google.jpg) no-repeat; height:33px;}
.nftw{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SrU_FO1envI/AAAAAAAAFqg/-XSngKyf3vg/nftw.jpg) no-repeat; height:35px;}

/* -------------------------------- */
/* Related Post			*/
.related-post-int{
	background:url(http://lh3.ggpht.com/_TqPdHmAEwTM/SrSzEhocFBI/AAAAAAAAFqE/g0vqcul5uz8/related-post.jpg) no-repeat; 
	height:36px; width:auto; display:block;}
.related-post{padding:10px; background:#f7f7f7;}
.related-post a:link,
.related-post a:visited{
display:block; height:26px; line-height:26px; text-decoration:none; border-bottom:solid 1px #DEDEDE;}
.related-post a:hover{text-decoration:underline;}

/* -------------------------------- */
/* Design News Section 				*/

.design_news{font-size:11px;}
.design_news a{font-size:13px;}
.design_news p{margin:0; padding:4px 0; border:0;color:#777;}

/* -------------------------------- */
/* Intro Section	 				*/
#intro{border-top:none;}
#intro a{color:#232323; border-bottom:solid 1px #BBB; text-decoration:none;}
#intro ul{margin-bottom:0;}
#intro ul li{padding-bottom:0px; color:#666;}
.intro-twitter,
.intro-feed,
.intro-podcast,
.intro-delicious{
height:42px;
padding:6px 0 6px 46px;
}
.intro-delicious{padding-left:0px;}
.intro-twitter strong,
.intro-feed strong,
.intro-podcast strong,
.intro-delicious strong{
color:#232323;
display:block;
font-size:14px;
}
.intro-twitter{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SonzwRz1udI/AAAAAAAAFjE/94Kc8yXghU4/tweet.jpg) no-repeat 0 4px;}
.intro-feed{background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SonzwKomHZI/AAAAAAAAFjA/v5awrhm_p0g/rss.jpg) no-repeat 0 4px;}
.intro-podcast{background:url(http://lh5.ggpht.com/_TqPdHmAEwTM/Son0hMDv8pI/AAAAAAAAFjI/WrXeVX4PpsM/podcast.jpg) no-repeat 0 4px;}
.intro-delicious{background:url(http://lh6.ggpht.com/_TqPdHmAEwTM/Son0xAe0qUI/AAAAAAAAFjM/TNwEZSIO9-8/heart.jpg) no-repeat 0 4px;}

/* -------------------------------- */
/* DISQUS			  				*/
#disqus_thread #dsq-content h3 {font-weight: bold; border:none; background:none; padding-bottom:16px; font-weight:16px;}
#dsq-post-add{background:#EFEFEF; padding:8px;}
#dsq-content #dsq-comments .dsq-header-avatar img{border:solid 1px #DEDEDE; margin-right:14px;}

.tweetmeme{float:right; margin-left:14px; padding-top:14px;}

.jumpText a:link,
.jumpText a:visited{
	font-size:13px;
	text-decoration:none;
	font-weight:bold;
	clear:both;}
.jumpText a:hover{
	text-decoration:underline;
}
.mt{font-size:18px; display:block; color:#444;}
.micro-sub-l{
	font-size:14px;
	font-weight:bold;
	padding-bottom:6px;
}
.micro-sub-l span{
	font-size:12px;
	font-weight:normal;
	clear:both;
	display:block;
	padding-top:6px;
}
</style>
<style type="text/css">
h2{border-top:none; padding-top:0;}
.tweetmeme{padding-top:0;}
.intro-image{display:none;}
</style>
<link href="http://lh5.ggpht.com/_TqPdHmAEwTM/Sosn6oEn_uI/AAAAAAAAFjo/3YnxZC73rsw/favicon.gif" rel="icon" type="image/png">
<script type="text/javascript">(function(){var a;var b=navigator.userAgent;a=-1!=b.indexOf("Mobile")&&-1!=b.indexOf("WebKit")&&-1==b.indexOf("iPad")?!0:-1!=b.indexOf("Opera Mini")?!0:!1;if(a){var c;a:{var d=window.location.href,e=d.split("?");switch(e.length){case 1:c=d+"?m=1";break a;case 2:c=0<=e[1].search("(^|&)m=")?null:d+"&m=1";break a;default:c=null}}c&&window.location.replace(c)};})();
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script><script type="text/javascript" src="./Simple CSS vertical menu Digg-like_files/google_top.js"></script><script src="./Simple CSS vertical menu Digg-like_files/thread.js" async="" charset="UTF-8"></script><link rel="stylesheet" type="text/css" href="./Simple CSS vertical menu Digg-like_files/defaults.css"><script src="./Simple CSS vertical menu Digg-like_files/disqus.js" async="" charset="UTF-8"></script><link rel="stylesheet" type="text/css" href="./Simple CSS vertical menu Digg-like_files/theme.css"><script src="./Simple CSS vertical menu Digg-like_files/theme.js" async="" charset="UTF-8"></script><script src="./Simple CSS vertical menu Digg-like_files/all.js" async="" charset="UTF-8"></script><style type="text/css">.fb_hidden{position:absolute;top:-10000px;z-index:10001}
.fb_invisible{display:none}
.fb_reset{background:none;border-spacing:0;border:0;color:#000;cursor:auto;direction:ltr;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size: 11px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal}
.fb_link img{border:none}
.fb_dialog{background:rgba(82, 82, 82, .7);position:absolute;top:-10000px;z-index:10001}
.fb_dialog_advanced{padding:10px;-moz-border-radius:8px;-webkit-border-radius:8px}
.fb_dialog_content{background:#fff;color:#333}
.fb_dialog_close_icon{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yL/r/s816eWC-2sl.gif);cursor:pointer;display:block;height:15px;position:absolute;right:18px;top:17px;width:15px;top:8px\9;right:7px\9}
.fb_dialog_mobile .fb_dialog_close_icon{top:5px;left:5px;right:auto}
.fb_dialog_padding{background-color:transparent;position:absolute;width:1px;z-index:-1}
.fb_dialog_close_icon:hover{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yL/r/s816eWC-2sl.gif)}
.fb_dialog_close_icon:active{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent;_background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yL/r/s816eWC-2sl.gif)}
.fb_dialog_loader{background-color:#f2f2f2;border:1px solid #606060;font-size: 24px;padding:20px}
.fb_dialog_top_left,
.fb_dialog_top_right,
.fb_dialog_bottom_left,
.fb_dialog_bottom_right{height:10px;width:10px;overflow:hidden;position:absolute}
.fb_dialog_top_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/ye/r/8YeTNIlTZjm.png) no-repeat 0 0;left:-10px;top:-10px}
.fb_dialog_top_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/ye/r/8YeTNIlTZjm.png) no-repeat 0 -10px;right:-10px;top:-10px}
.fb_dialog_bottom_left{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/ye/r/8YeTNIlTZjm.png) no-repeat 0 -20px;bottom:-10px;left:-10px}
.fb_dialog_bottom_right{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/ye/r/8YeTNIlTZjm.png) no-repeat 0 -30px;right:-10px;bottom:-10px}
.fb_dialog_vert_left,
.fb_dialog_vert_right,
.fb_dialog_horiz_top,
.fb_dialog_horiz_bottom{position:absolute;background:#525252;filter:alpha(opacity=70);opacity:.7}
.fb_dialog_vert_left,
.fb_dialog_vert_right{width:10px;height:100%}
.fb_dialog_vert_left{margin-left:-10px}
.fb_dialog_vert_right{right:0;margin-right:-10px}
.fb_dialog_horiz_top,
.fb_dialog_horiz_bottom{width:100%;height:10px}
.fb_dialog_horiz_top{margin-top:-10px}
.fb_dialog_horiz_bottom{bottom:0;margin-bottom:-10px}
.fb_dialog_iframe{line-height:0}
.fb_dialog_content .dialog_title{background:#6d84b4;border:1px solid #3b5998;color:#fff;font-size: 14px;font-weight:bold;margin:0}
.fb_dialog_content .dialog_title > span{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/yd/r/Cou7n-nqK52.gif)
no-repeat 5px 50%;float:left;padding:5px 0 7px 26px}
body.fb_hidden{-webkit-transform:none;height:100%;margin:0;left:-10000px;overflow:visible;position:absolute;top:-10000px;width:100%
}
.fb_dialog.fb_dialog_mobile.loading{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/yO/r/_j03izEX40U.gif)
white no-repeat 50% 50%;min-height:100%;min-width:100%;overflow:hidden;position:absolute;top:0;z-index:10001}
.fb_dialog.fb_dialog_mobile.loading.centered{max-height:590px;min-height:590px;max-width:500px;min-width:500px}
#fb-root #fb_dialog_ipad_overlay{background:rgba(0, 0, 0, .45);position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:10000}
#fb-root #fb_dialog_ipad_overlay.hidden{display:none}
.fb_dialog.fb_dialog_mobile.loading iframe{visibility:hidden}
.fb_dialog_content .dialog_header{-webkit-box-shadow:white 0 1px 1px -1px inset;background:-webkit-gradient(linear, 0 0, 0 100%, from(#738ABA), to(#2C4987));border-bottom:1px solid;border-color:#1d4088;color:#fff;font:14px Helvetica, sans-serif;font-weight:bold;text-overflow:ellipsis;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0;vertical-align:middle;white-space:nowrap}
.fb_dialog_content .dialog_header table{-webkit-font-smoothing:subpixel-antialiased;height:43px;width:100%
}
.fb_dialog_content .dialog_header td.header_left{font-size: 12px;padding-left:5px;vertical-align:middle;width:60px
}
.fb_dialog_content .dialog_header td.header_right{font-size: 12px;padding-right:5px;vertical-align:middle;width:60px
}
.fb_dialog_content .touchable_button{background:-webkit-gradient(linear, 0 0, 0 100%, from(#4966A6),
color-stop(0.5, #355492), to(#2A4887));border:1px solid #29447e;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-webkit-box-shadow:rgba(0, 0, 0, .117188) 0 1px 1px inset,
rgba(255, 255, 255, .167969) 0 1px 0;display:inline-block;margin-top:3px;max-width:85px;line-height:18px;padding:4px 12px;position:relative}
.fb_dialog_content .dialog_header .touchable_button input{border:none;background:none;color:#fff;font:12px Helvetica, sans-serif;font-weight:bold;margin:2px -12px;padding:2px 6px 3px 6px;text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}
.fb_dialog_content .dialog_header .header_center{color:#fff;font-size: 16px;font-weight:bold;line-height:18px;text-align:center;vertical-align:middle}
.fb_dialog_content .dialog_content{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;border:1px solid #555;border-bottom:0;border-top:0;height:150px}
.fb_dialog_content .dialog_footer{background:#f2f2f2;border:1px solid #555;border-top-color:#ccc;height:40px}
#fb_dialog_loader_close{float:left}
.fb_dialog.fb_dialog_mobile .fb_dialog_close_button{text-shadow:rgba(0, 30, 84, .296875) 0 -1px 0}
.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon{visibility:hidden}
.fb_iframe_widget{position:relative;display:-moz-inline-block;display:inline-block}
.fb_iframe_widget iframe{position:absolute;z-index:1}
.fb_iframe_widget span{position:relative;display:inline-block;vertical-align:text-bottom;text-align:justify}
.fb_hide_iframes iframe{position:relative;left:-10000px}
.fb_iframe_widget_loader{position:relative;display:inline-block}
.fb_iframe_widget_fluid{display:inline}
.fb_iframe_widget_loader iframe{min-height:32px;z-index:2;zoom:1}
.fb_iframe_widget_loader .FB_Loader{background:url(http://static.ak.fbcdn.net/rsrc.php/v1/y9/r/jKEcVPZFk-2.gif) no-repeat;height:32px;width:32px;margin-left:-16px;position:absolute;left:50%;z-index:4}
.fb_button_simple,
.fb_button_simple_rtl{background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png);background-repeat:no-repeat;cursor:pointer;outline:none;text-decoration:none}
.fb_button_simple_rtl{background-position:right 0}
.fb_button_simple .fb_button_text{margin:0 0 0 20px;padding-bottom:1px}
.fb_button_simple_rtl .fb_button_text{margin:0 10px 0 0}
a.fb_button_simple:hover .fb_button_text,
a.fb_button_simple_rtl:hover .fb_button_text,
.fb_button_simple:hover .fb_button_text,
.fb_button_simple_rtl:hover .fb_button_text{text-decoration:underline}
.fb_button,
.fb_button_rtl{background:#29447e url(http://static.ak.fbcdn.net/rsrc.php/v1/yL/r/FGFbc80dUKj.png);background-repeat:no-repeat;cursor:pointer;display:inline-block;padding:0 0 0 1px;text-decoration:none;outline:none}
.fb_button .fb_button_text,
.fb_button_rtl .fb_button_text{background:#5f78ab url(http://static.ak.fbcdn.net/rsrc.php/v1/yL/r/FGFbc80dUKj.png);border-top:solid 1px #879ac0;border-bottom:solid 1px #1a356e;color:#fff;display:block;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-weight:bold;padding:2px 6px 3px 6px;margin:1px 1px 0 21px;text-shadow:none}
a.fb_button,
a.fb_button_rtl,
.fb_button,
.fb_button_rtl{text-decoration:none}
a.fb_button:active .fb_button_text,
a.fb_button_rtl:active .fb_button_text,
.fb_button:active .fb_button_text,
.fb_button_rtl:active .fb_button_text{border-bottom:solid 1px #29447e;border-top:solid 1px #45619d;background:#4f6aa3;text-shadow:none}
.fb_button_xlarge,
.fb_button_xlarge_rtl{background-position:left -60px;font-size: 24px;line-height:30px}
.fb_button_xlarge .fb_button_text{padding:3px 8px 3px 12px;margin-left:38px}
a.fb_button_xlarge:active{background-position:left -99px}
.fb_button_xlarge_rtl{background-position:right -268px}
.fb_button_xlarge_rtl .fb_button_text{padding:3px 8px 3px 12px;margin-right:39px}
a.fb_button_xlarge_rtl:active{background-position:right -307px}
.fb_button_large,
.fb_button_large_rtl{background-position:left -138px;font-size: 13px;line-height:16px}
.fb_button_large .fb_button_text{margin-left:24px;padding:2px 6px 4px 6px}
a.fb_button_large:active{background-position:left -163px}
.fb_button_large_rtl{background-position:right -346px}
.fb_button_large_rtl .fb_button_text{margin-right:25px}
a.fb_button_large_rtl:active{background-position:right -371px}
.fb_button_medium,
.fb_button_medium_rtl{background-position:left -188px;font-size: 11px;line-height:14px}
a.fb_button_medium:active{background-position:left -210px}
.fb_button_medium_rtl{background-position:right -396px}
.fb_button_text_rtl,
.fb_button_medium_rtl .fb_button_text{padding:2px 6px 3px 6px;margin-right:22px}
a.fb_button_medium_rtl:active{background-position:right -418px}
.fb_button_small,
.fb_button_small_rtl{background-position:left -232px;font-size: 10px;line-height:10px}
.fb_button_small .fb_button_text{padding:2px 6px 3px;margin-left:17px}
a.fb_button_small:active,
.fb_button_small:active{background-position:left -250px}
.fb_button_small_rtl{background-position:right -440px}
.fb_button_small_rtl .fb_button_text{padding:2px 6px;margin-right:18px}
a.fb_button_small_rtl:active{background-position:right -458px}
.fb_share_count_wrapper{position:relative;float:left}
.fb_share_count{background:#b0b9ec none repeat scroll 0 0;color:#333;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;text-align:center}
.fb_share_count_inner{background:#e8ebf2;display:block}
.fb_share_count_right{margin-left:-1px;display:inline-block}
.fb_share_count_right .fb_share_count_inner{border-top:solid 1px #e8ebf2;border-bottom:solid 1px #b0b9ec;margin:1px 1px 0 1px;font-size: 10px;line-height:10px;padding:2px 6px 3px;font-weight:bold}
.fb_share_count_top{display:block;letter-spacing:-1px;line-height:34px;margin-bottom:7px;font-size: 22px;border:solid 1px #b0b9ec}
.fb_share_count_nub_top{border:none;display:block;position:absolute;left:7px;top:35px;margin:0;padding:0;width:6px;height:7px;background-repeat:no-repeat;background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yU/r/bSOHtKbCGYI.png)}
.fb_share_count_nub_right{border:none;display:inline-block;padding:0;width:5px;height:10px;background-repeat:no-repeat;background-image:url(http://static.ak.fbcdn.net/rsrc.php/v1/yX/r/i_oIVTKMYsL.png);vertical-align:top;background-position:right 5px;z-index:10;left:2px;margin:0 2px 0 0;position:relative}
.fb_share_no_count{display:none}
.fb_share_size_Small .fb_share_count_right .fb_share_count_inner{font-size: 10px}
.fb_share_size_Medium .fb_share_count_right .fb_share_count_inner{font-size: 11px;padding:2px 6px 3px;letter-spacing:-1px;line-height:14px}
.fb_share_size_Large .fb_share_count_right .fb_share_count_inner{font-size: 13px;line-height:16px;padding:2px 6px 4px;font-weight:normal;letter-spacing:-1px}
.fb_share_count_hidden .fb_share_count_nub_top,
.fb_share_count_hidden .fb_share_count_top,
.fb_share_count_hidden .fb_share_count_nub_right,
.fb_share_count_hidden .fb_share_count_right{visibility:hidden}
.fb_connect_bar_container div,
.fb_connect_bar_container span,
.fb_connect_bar_container a,
.fb_connect_bar_container img,
.fb_connect_bar_container strong{background:none;border-spacing:0;border:0;direction:ltr;font-style:normal;font-variant:normal;letter-spacing:normal;line-height:1;margin:0;overflow:visible;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-spacing:normal;vertical-align:baseline}
.fb_connect_bar_container{position:fixed;left:0 !important;right:0 !important;height:42px !important;padding:0 25px !important;margin:0 !important;vertical-align:middle !important;border-bottom:1px solid #333 !important;background:#3b5998 !important;z-index:99999999 !important;overflow:hidden !important}
.fb_connect_bar_container_ie6{position:absolute;top:expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px":body.scrollTop+"px")}
.fb_connect_bar{position:relative;margin:auto;height:100%;width:100%;padding:6px 0 0 0 !important;background:none;color:#fff !important;font-family:"lucida grande", tahoma, verdana, arial, sans-serif !important;font-size: 13px !important;font-style:normal !important;font-variant:normal !important;font-weight:normal !important;letter-spacing:normal !important;line-height:1 !important;text-decoration:none !important;text-indent:0 !important;text-shadow:none !important;text-transform:none !important;white-space:normal !important;word-spacing:normal !important}
.fb_connect_bar a:hover{color:#fff}
.fb_connect_bar .fb_profile img{height:30px;width:30px;vertical-align:middle;margin:0 6px 5px 0}
.fb_connect_bar div a,
.fb_connect_bar span,
.fb_connect_bar span a{color:#bac6da;font-size: 11px;text-decoration:none}
.fb_connect_bar .fb_buttons{float:right;margin-top:7px}
.fb_edge_widget_with_comment{position:relative;*z-index:1000}
.fb_edge_widget_with_comment span.fb_edge_comment_widget{position:absolute}
.fb_edge_widget_with_comment span.fb_send_button_form_widget{z-index:1}
.fb_edge_widget_with_comment span.fb_send_button_form_widget .FB_Loader{left:0;top:1px;margin-top:6px;margin-left:0;background-position:50% 50%;background-color:#fff;height:150px;width:394px;border:1px #666 solid;border-bottom:2px solid #283e6c;z-index:1}
.fb_edge_widget_with_comment span.fb_send_button_form_widget.dark .FB_Loader{background-color:#000;border-bottom:2px solid #ccc}
.fb_edge_widget_with_comment span.fb_send_button_form_widget.siderender
.FB_Loader{margin-top:0}
.fbpluginrecommendationsbarleft,
.fbpluginrecommendationsbarright{position:fixed !important;bottom:0;z-index:999}
/* @noflip */
.fbpluginrecommendationsbarleft{left:10px}
/* @noflip */
.fbpluginrecommendationsbarright{right:10px}
</style><script src="./Simple CSS vertical menu Digg-like_files/event.js" async="" charset="UTF-8"></script></head>
<body>
<div class="navbar section" id="navbar"><div class="widget Navbar" id="Navbar1"><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src="./Simple CSS vertical menu Digg-like_files/navbar.htm" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
<div></div><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</div></div>
<div id="header">
<div id="header-c">
<p class="left"><a href="http://woork.blogspot.com/"><img border="0" height="48" src="./Simple CSS vertical menu Digg-like_files/woork-log.jpg" width="102"></a></p>
<p class="right">
<a href="http://woork.blogspot.com/2009/02/add-design-news-on-woork.html">Add News</a>
<a href="http://feeds2.feedburner.com/Woork">RSS Feed</a>
<a href="mailto:antonio.lupetti@gmail.com">Contact Me</a>
</p>
</div>
</div>
<div id="nav-bar">
<div id="nav-bar-c">
<span class="nav-web"></span>
<a href="http://woork.blogspot.com/search/label/ajax?max-results=8">Ajax</a>
<a href="http://woork.blogspot.com/search/label/blogger?max-results=8">Blogger</a>
<a href="http://woork.blogspot.com/search/label/css?max-results=8">CSS</a>
<a href="http://woork.blogspot.com/search/label/fonts?max-results=8">Fonts</a>
<a href="http://woork.blogspot.com/search/label/html?max-results=8">HTML</a>
<a href="http://woork.blogspot.com/search/label/jquery?max-results=8">jQuery</a>
<a href="http://woork.blogspot.com/search/label/mootools?max-results=8">MooTools</a>
<a href="http://woork.blogspot.com/search/label/PHP?max-results=8">PHP</a>
<a href="http://woork.blogspot.com/search/label/web%20development?max-results=8">Web Development</a>
<a href="http://woork.blogspot.com/search/label/resources?max-results=8">Resources</a>
<a href="http://woork.blogspot.com/2007/10/table-of-contents.html">More...</a>
</div>
<div id="nav-bar-d">
<span class="nav-tech"></span>
<a href="http://woork.blogspot.com/search/label/apple?max-results=8">Apple</a>
<a href="http://woork.blogspot.com/search/label/applications?max-results=8">Applications</a>
<a href="http://woork.blogspot.com/search/label/gadgets?max-results=8">Gadgets</a>
<a href="http://woork.blogspot.com/search/label/google?max-results=8">Google</a>
<a href="http://woork.blogspot.com/search/label/microsoft?max-results=8">Microsoft</a>
<a href="http://woork.blogspot.com/search/label/social%20networks?max-results=8">Social Networks</a>
<a href="http://woork.blogspot.com/search/label/tech%20news?max-results=8">Tech News</a>
</div>
</div>
<div id="container">
<div class="moved">This blog has moved here: <a href="http://woorkup.com/">woorkup.com</a> | <strong>FOLLOW ME ON TWITTER <a href="http://www.youtube.com/user/woorkup">@woork</a></strong></div>
<table border="0" cellpadding="0" cellspacing="0" width="936">
<tbody><tr>
<td rowspan="2" valign="top" width="551"><div id="main_left">
<div class="section" id="main_s"><div class="widget Blog" id="Blog1">
<div class="blog-posts hfeed">
<!-- google_ad_section_start -->
<div class="date-header">
Friday, January 18, 2008
</div>
<div class="post hentry">
<div class="tweetmeme">
<script type="text/javascript">
tweetmeme_url = 'http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html';
</script>
<script src="./Simple CSS vertical menu Digg-like_files/button.js" type="text/javascript"></script><iframe src="./Simple CSS vertical menu Digg-like_files/button.htm" height="61" width="50" frameborder="0" scrolling="no"></iframe>
</div>
<a name="3245083572946605987"></a>
<h2>
<a href="./Simple CSS vertical menu Digg-like_files/Simple CSS vertical menu Digg-like.htm">
Simple CSS vertical menu Digg-like
</a>
</h2>
<img src="./Simple CSS vertical menu Digg-like_files/al.jpg" style="float:left; padding-right:14px;">
<div class="post-tag">by Antonio Lupetti <b style="border-right:solid 1px #CCCCCC; padding:0 10px; margin-right:10px;">Tag</b>
<a href="http://woork.blogspot.com/search/label/css?max-results=10" rel="tag" style="border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;">
css
</a>
<a href="http://woork.blogspot.com/search/label/html?max-results=10" rel="tag" style="border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;">
html
</a>
<a href="http://woork.blogspot.com/search/label/javascript?max-results=10" rel="tag" style="border-right:solid 1px #CCCCCC; padding-right:10px; margin-right:10px;">
javascript
</a>
</div>
<div class="share-delicious">
<a href="http://del.icio.us/post?url=http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html&title=Simple%20CSS%20vertical%20menu%20Digg-like" target="_blank">Save to delicious</a>
</div>
<div class="share-stumble">
<a href="http://www.stumbleupon.com/submit?url=http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html">StumbleUpon</a></div>
<div class="spacer"></div>
<div class="ads">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="354"><!-- google_ad_section_end -->
<script type="text/javascript"><!--
google_ad_client="pub-9932209926421067";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000+00031+00005+00302";
google_ad_width=300;
google_ad_height=250;
google_ad_format="300x250_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="333333";
google_color_url="185D99";
google_color_text="777777";
//--></script>
<script type="text/javascript" src="./Simple CSS vertical menu Digg-like_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px"><ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px"><iframe allowtransparency="true" frameborder="0" height="250" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+=&#39;.call&#39;;setTimeout(h,0)}else if(h.match){i+=&#39;.nav&#39;;w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" scrolling="no" vspace="0" width="300" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;"></iframe></ins></ins>
<!-- google_ad_section_start --></td>
<td><div class="ads-right-min">
<a class="mini-feed" href="http://feeds2.feedburner.com/Woork">Subscribe RSS Feed</a>
<a class="mini-tweet" href="http://twitter.com/home/?status=Simple%20CSS%20vertical%20menu%20Digg-like%20http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html%20via%20@woork">ReTweet</a>
<a class="mini-facebook" href="http://www.facebook.com/share.php?u=http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html">Share on Facebook</a>
<a class="mini-tech" href="http://technorati.com/faves?sub=addfavbtn&add=http://woork.blogspot.com">Add to Technorati</a>
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="post-body-n">
<p>
</p><div class="bigInt">Do you like Digg.com webdesign? I like much its menu, simple and clean.</div><br>
This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu. The result is like this:<br>
<div class="spacer"></div><div style="text-align: center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_TqPdHmAEwTM/R5E6dtOYBmI/AAAAAAAAAts/wAUoo7yJAho/s1600-h/menu1.png"><img style="cursor: pointer;" src="./Simple CSS vertical menu Digg-like_files/menu1.png" alt="" id="BLOGGER_PHOTO_ID_5156967330346436194" border="0"></a>                     <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_TqPdHmAEwTM/R5E6htOYBnI/AAAAAAAAAt0/tSmUBXmd2fo/s1600-h/menu2.png"><img style="cursor: pointer; margin-left: 10px;" src="./Simple CSS vertical menu Digg-like_files/menu2.png" alt="" id="BLOGGER_PHOTO_ID_5156967399065912946" border="0"></a><br>
<div style="text-align: left;"></div></div><img style="cursor: pointer;" src="./Simple CSS vertical menu Digg-like_files/page_white_code_red.png" alt="" id="BLOGGER_PHOTO_ID_5124626767371640482" align="absmiddle" border="0"> <a href="http://www.box.net/shared/tkyq60ukgo">Download this tutorial</a><br>
<a name="more"></a><br>
<br>
<strong>Step 1: HTML code</strong><br>
HTML structure is very simple and contains two <em>&lt;ul&gt;</em> tags (<em>menu</em> and <em>sub-menu</em>):<br>
<br>
<br>
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_TqPdHmAEwTM/R5E9cdOYBoI/AAAAAAAAAt8/O4b2xSesq6U/s1600-h/structure.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="./Simple CSS vertical menu Digg-like_files/structure.png" alt="" id="BLOGGER_PHOTO_ID_5156970607406483074" border="0"></a><br>
Copy and paste the following code in a new html page:<br>
<br>
<div class="code"><span style="color: rgb(0, 0, 153);">&lt;div id=<span style="color: rgb(51, 51, 255);">"</span></span><span style="color: rgb(51, 51, 255);">middlebar"</span><span style="color: rgb(0, 0, 153);">&gt;</span><br>
<span style="color: rgb(0, 0, 153);">&lt;ul class=<span style="color: rgb(51, 51, 255);">"</span></span><span style="color: rgb(51, 51, 255);">menu"</span><span style="color: rgb(0, 0, 153);">&gt;</span><br>
<div style="margin-left: 10px;"><span style="color: rgb(0, 0, 153);">      &lt;li&gt;</span><span style="color: rgb(0, 153, 0);">&lt;a href=</span><span style="color: rgb(51, 51, 255);">"#"</span> <span style="color: rgb(0, 153, 0);">onclick=</span><span style="color: rgb(51, 51, 255);">"javascript:showlayer('sm_1')"</span><span style="color: rgb(0, 153, 0);">&gt;</span> Profile<span style="color: rgb(0, 153, 0);">&lt;/a&gt;</span><span style="color: rgb(0, 0, 153);">&lt;/li&gt;</span><br>
<div style="margin-left: 20px;"><span style="color: rgb(0, 0, 153);">    &lt;ul class=</span><span style="color: rgb(51, 51, 255);">"submenu"</span><span style="color: rgb(0, 0, 153);"> id=</span><span style="color: rgb(51, 51, 255);">"sm_1"</span><span style="color: rgb(0, 0, 153);">&gt;</span><br>
<span style="color: rgb(0, 0, 153);"> &lt;li&gt;</span><span style="color: rgb(0, 153, 0);">&lt;a href=</span><span style="color: rgb(51, 51, 255);">"p1.html"</span><span style="color: rgb(0, 153, 0);">&gt;</span>Profile<span style="color: rgb(0, 153, 0);">&lt;/a&gt;</span><span style="color: rgb(0, 0, 153);">&lt;/li&gt;</span><br>
<span style="color: rgb(0, 0, 153);">   &lt;li&gt;</span><span style="color: rgb(0, 153, 0);">&lt;a href=</span><span style="color: rgb(51, 51, 255);">"p2.hmtl"</span><span style="color: rgb(0, 153, 0);">&gt;</span>Inbox <span style="color: rgb(0, 153, 0);">&lt;/a&gt;</span><span style="color: rgb(0, 0, 153);">&lt;/li&gt;</span><br>
<span style="color: rgb(0, 0, 153);">   &lt;li&gt;</span><span style="color: rgb(0, 153, 0);"></span><span style="color: rgb(0, 153, 0);">&lt;a href=</span><span style="color: rgb(51, 51, 255);">"p3.hmtl"</span><span style="color: rgb(0, 153, 0);">&gt;</span>Log-out<span style="color: rgb(0, 153, 0);">&lt;/a&gt;</span><span style="color: rgb(0, 0, 153);">&lt;/li&gt;</span><br>
<span style="color: rgb(0, 0, 153);">&lt;/ul&gt;</span><br>
</div></div><span style="color: rgb(0, 0, 153);">  &lt;/ul&gt;</span><br>
<span style="color: rgb(0, 0, 153);">&lt;/div&gt;</span><br>
</div><br>
<br>
<strong>Step 2: CSS code</strong><br>
Copy and paste this code to define menu button:<br>
<br>
<div class="code"><span style="color: rgb(204, 51, 204);">ul, li{</span><span style="color: rgb(0, 0, 153);">margin</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">0</span><span style="color: rgb(204, 51, 204);">;</span> <span style="color: rgb(0, 0, 153);">border</span><span style="color: rgb(0, 0, 153);"></span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">0</span><span style="color: rgb(204, 51, 204);">;</span> <span style="color: rgb(0, 0, 153);">padding</span><span style="color: rgb(0, 0, 153);"></span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">0</span><span style="color: rgb(204, 51, 204);">;</span> <span style="color: rgb(0, 0, 153);">list-style</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">none</span><span style="color: rgb(204, 51, 204);">;}</span><br>
<span style="color: rgb(204, 51, 204);">#middlebar{</span><br>
<span style="color: rgb(0, 0, 153);">   font-size</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">11px</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   color</span><span style="color: rgb(0, 0, 153);"></span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">#3b5d14</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   background</span><span style="color: rgb(0, 0, 153);"></span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">#90b557</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   font-weight</span><span style="color: rgb(0, 0, 153);"></span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">bold</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   padding</span><span style="color: rgb(0, 0, 153);"></span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">4px</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   height</span><span style="color: rgb(0, 0, 153);"></span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">30px</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(204, 51, 204);">}</span><br>
<span style="color: rgb(204, 51, 204);">   #middlebar .menu li {</span><br>
<span style="color: rgb(0, 0, 153);">       background</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">url(lm.png) left top no-repeat</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       height</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">30px</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       float</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">left</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       margin-right</span>:<span style="color: rgb(51, 51, 255);">10px</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(204, 51, 204);">   }</span><br>
<span style="color: rgb(204, 51, 204);">   #middlebar .menu li a{</span><br>
<span style="color: rgb(0, 0, 153);">       color</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">#3b5d14</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       text-decoration</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(51, 51, 255);">none</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">padding</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(51, 51, 255);">0 10px</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">height</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(51, 51, 255);">30px</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       line-height</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(51, 51, 255);">30px</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       display</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(51, 51, 255);">block</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       float</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(51, 51, 255);">left</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       padding</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(51, 51, 255);">0 26px 0 10px</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       background</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);"></span><span style="color: rgb(51, 51, 255);">url(rm.png) right top no-repeat</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(204, 51, 204);">   }</span><br>
<span style="color: rgb(204, 51, 204);">   #middlebar .menu li a:hover{</span><br>
<span style="color: rgb(0, 0, 153);">       color</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">#666666</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(204, 51, 204);">   }</span><br>
</div><br>
<br>
...and this is the code for the sub-menu:<br>
<br>
<div class="code"><span style="color: rgb(204, 51, 204);">#middlebar ul .submenu {</span><br>
<span style="color: rgb(0, 0, 153);">   border</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">solid 1px #c9dea1</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   border-top</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">none</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   background</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">#FFFFFF</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   position</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">relative</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   top</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">4px</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   width</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">150px</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   padding</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">6px 0</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   clear</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">both</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   z-index</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">2</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">   display</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">none</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(204, 51, 204);">}</span><br>
<span style="color: rgb(204, 51, 204);">   #middlebar ul .submenu li{</span><br>
<span style="color: rgb(0, 0, 153);">       background</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">none</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       display</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">block</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       float</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">none</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       margin</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">0 6px</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       border</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">0</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       height</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">auto</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       line-height</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">normal</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       border-top</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">solid 1px #DEDEDE</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(204, 51, 204);">   }</span><br>
<span style="color: rgb(204, 51, 204);">   #middlebar .submenu li a{</span><br>
<span style="color: rgb(0, 0, 153);">       background</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">none</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       display</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">block</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       float</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">none</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       padding</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">6px 6px</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       margin</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">0</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       border</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">0</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       height</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">auto</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       color</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">#105cbe</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(0, 0, 153);">       line-height</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">normal</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(204, 51, 204);">   }</span><br>
<span style="color: rgb(204, 51, 204);">   #middlebar .submenu li a:hover{</span><br>
<span style="color: rgb(0, 0, 153);">       background</span><span style="color: rgb(204, 51, 204);">:</span><span style="color: rgb(51, 51, 255);">#e3edef</span><span style="color: rgb(204, 51, 204);">;</span><br>
<span style="color: rgb(204, 51, 204);">   }</span><br>
</div><br>
<br>
<strong>Step 3: Javascript to show/hide submenu</strong><br>
Now, add this simple Javascript code to show/hide the sub-menu when an user clicks on a link contained into the menu.<br>
<br>
<div class="code"><span style="font-weight: bold; color: rgb(0, 0, 153);">function</span> showlayer<span style="font-weight: bold; color: rgb(0, 0, 153);">(</span>layer<span style="font-weight: bold; color: rgb(0, 0, 153);">){</span><br>
<span style="font-weight: bold; color: rgb(0, 0, 153);">var</span> myLayer<span style="color: rgb(51, 51, 255);"> = </span><span style="color: rgb(204, 51, 204);">document</span>.getElementById<span style="font-weight: bold; color: rgb(0, 0, 153);">(</span>layer<span style="font-weight: bold; color: rgb(0, 0, 153);">);</span><br>
<span style="color: rgb(0, 153, 0);">  if</span><span style="font-weight: bold; color: rgb(0, 0, 153);">(</span>myLayer.style.display<span style="color: rgb(51, 102, 255);">=="none" || </span>myLayer.style.display<span style="color: rgb(51, 102, 255);">==""</span><span style="font-weight: bold; color: rgb(0, 0, 153);">){</span><br>
myLayer.style.display<span style="color: rgb(51, 102, 255);">="block"</span><span style="color: rgb(0, 0, 153); font-weight: bold;">;</span><br>
<span style="font-weight: bold; color: rgb(0, 0, 153);">}</span> <span style="color: rgb(0, 153, 0);">else</span> <span style="font-weight: bold; color: rgb(0, 0, 153);">{ </span><br>
myLayer.style.display<span style="color: rgb(51, 102, 255);">="none"</span><span style="font-weight: bold; color: rgb(0, 0, 153);">;</span><br>
<span style="font-weight: bold; color: rgb(0, 0, 153);">        }</span><br>
<span style="font-weight: bold; color: rgb(0, 0, 153);">}</span><br>
</div><br>
This function get in input the parameter <em>layer</em> (the ID of sub-menu you want hide/display), in this case <em>sm_1</em>, passed from this link:<br>
<br>
<div class="code"><span style="color: rgb(0, 0, 153);">      &lt;li&gt;</span><span style="color: rgb(0, 153, 0);">&lt;a href=</span><span style="color: rgb(51, 51, 255);">"#"</span> <span style="color: rgb(0, 153, 0); font-weight: bold;">onclick=</span><span style="color: rgb(51, 51, 255); font-weight: bold;">"javascript:showlayer('sm_1')"</span><span style="color: rgb(0, 153, 0);">&gt;</span> Profile<span style="color: rgb(0, 153, 0);">&lt;/a&gt;</span><span style="color: rgb(0, 0, 153);">&lt;/li&gt;</span></div><br>
<br>
Save all and try it!<br>
<br>
<img style="cursor: pointer;" src="./Simple CSS vertical menu Digg-like_files/page_white_code_red.png" alt="" id="BLOGGER_PHOTO_ID_5124626767371640482" align="absmiddle" border="0"> <a href="http://www.box.net/shared/tkyq60ukgo">Download this tutorial</a><br>
<br>
<strong>Related content</strong><br>
<a href="http://woork.blogspot.com/2008/01/digg-like-navigation-bar-using-css.html">Digg-like navigation bar using CSS</a>
<p></p>
<div style="clear: both;"></div>
</div>
<div class="post-footer">
<div class="spacer"></div>
<p class="post-footer-line post-footer-line-1"><span class="post-timestamp">
</span>
</p><div class="spacer"></div>
<span class="post-icons">
</span>
<p></p>
</div>
</div>
<div class="comments" id="comments"><a name="comments"></a>
<div class="ads">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="354"><!-- google_ad_section_end -->
<script type="text/javascript"><!--
google_ad_client="pub-9932209926421067";
google_ad_host="pub-1556223355139109";
google_ad_host_channel="00000+00031+00005+00302";
google_ad_width=300;
google_ad_height=250;
google_ad_format="300x250_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="333333";
google_color_url="185D99";
google_color_text="777777";
//--></script>
<script type="text/javascript" src="./Simple CSS vertical menu Digg-like_files/show_ads.js">
</script><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px"><ins id="aswift_1_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px"><iframe allowtransparency="true" frameborder="0" height="250" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+=&#39;.call&#39;;setTimeout(h,0)}else if(h.match){i+=&#39;.nav&#39;;w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" scrolling="no" vspace="0" width="300" id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;"></iframe></ins></ins>
<!-- google_ad_section_start --></td>
<td>
<div class="ads-right-min">
<a class="mini-feed" href="http://feeds2.feedburner.com/Woork">Subscribe RSS Feed</a>
<a class="mini-tweet" href="http://twitter.com/home/?status=Simple%20CSS%20vertical%20menu%20Digg-like%20http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html%20via%20@woork">ReTweet</a>
<a class="mini-facebook" href="http://www.facebook.com/share.php?u=http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html">Share on Facebook</a>
<a class="mini-tech" href="http://technorati.com/faves?sub=addfavbtn&add=http://woork.blogspot.com">Add to Technorati</a>
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="spacer" style="height:20px;"></div>
<div id="backlinks-container" style="font-size:12px;">
<div id="Blog1_backlinks-container">
</div>
</div>
<div id="disqus_thread"><div id="dsq-content-stub" style="display: none; "><img width="71" height="17" alt="DISQUS" src=""><img width="16" height="11" alt="..." src="" style="margin:0 0 3px 5px"></div><div id="dsq-content" style="display: block; " class="clearfix">      <div id="dsq-global-toolbar" class="dsq-clearfix">        <ul class="dsq-global-toolbar-right dsq-clearfix">                            <li class="dsq-community-box">                <a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" class="dsq-toolbar-item dsq-tt" onclick="DISQUS.dtpl.actions.fire(&#39;community.show&#39;); return false" title="Expand Community Box"><span class="dsq-toolbar-icon"></span></a>            </li>                            <li class="dsq-global-toolbar-dropdown-container">                    <div id="dsq-toolbar-dropdown">    <a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" class="dsq-toolbar-logo dsq-toolbar-item dsq-clearfix"><span class="dsq-toolbar-icon">Disqus</span></a>    <div id="dsq-toolbar-dropdown-wrap" style="display: none">      <ul class="dsq-clearfix">                    <li class="dsq-login-link"><a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" onclick="DISQUS.dtpl.actions.fire(&#39;auth.login&#39;); return false"><span class="dsq-toolbar-icon"></span><span class="dsq-toolbar-label">Login</span></a></li>                    <li class="dsq-about-link"><a href="http://disqus.com/" target="_blank"><span class="dsq-toolbar-icon"></span><span class="dsq-toolbar-label">About Disqus</span></a></li>      </ul>    </div>  </div>            </li>        </ul>                <ul class="dsq-global-toolbar-left dsq-clearfix">            <li class="dsq-like-thread">                <a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" id="dsq-like-thread-button" class="dsq-toolbar-item dsq-clearfix  dsq-tt" onclick="DISQUS.dtpl.actions.fire(&#39;thread.vote&#39;, 1); return false;" title="I like this page">                    <span class="dsq-toolbar-icon"></span>                    <span class="dsq-toolbar-label">Like</span>                </a>            </li>            <li class="dsq-dislike-thread">                <a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" id="dsq-dislike-thread-button" class="dsq-toolbar-item dsq-clearfix  dsq-tt" onclick="DISQUS.dtpl.actions.fire(&#39;thread.vote&#39;, -1); return false" title="I don&#39;t like this page">                    <span class="dsq-toolbar-icon">Dislike</span>                </a>            </li>            <li class="dsq-like-panel">                <ul class="dsq-like-faces dsq-clearfix">                          <li class="dsq-tt" title="metriocoffee"><a href="http://disqus.com/metriocoffee/" onclick="return DISQUS.dtpl.actions.fire(&#39;profile.show&#39;, null, &#39;metriocoffee&#39;, false); return false"><img src="./Simple CSS vertical menu Digg-like_files/noavatar32.png"></a></li>    <li class="dsq-like-activity">                  and 6 others liked this.          </li>                </ul>            </li>        </ul>            </div>    <div id="dsq-like-tooltip">      <div id="dsq-share-step-1" class="dsq-share-step">        <h3>Glad you liked it. Would you like to share?</h3>        <p class="dsq-tooltip-checkbox"><input type="checkbox" id="dsq-share-thread-facebook" value="Facebook"><label for="dsq-share-thread-facebook"><span class="dsq-facebook">Facebook</span></label></p>        <p class="dsq-tooltip-checkbox"><input type="checkbox" id="dsq-share-thread-twitter" value="Twitter"><label for="dsq-share-thread-twitter"><span class="dsq-twitter">Twitter</span></label></p>        <ul id="dsq-tooltip-actions">                        <li><a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" onclick="DISQUS.dtpl.actions.fire(&#39;thread.share.send&#39;); return false" class="dsq-primary-action">Share</a></li>                    <li><a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" onclick="DISQUS.dtpl.actions.fire(&#39;thread.share.cancel&#39;); return false" class="dsq-secondary-action">No thanks</a></li>        </ul>      </div>      <div id="dsq-share-step-2" class="dsq-share-step" style="display:none !important">        <p>Sharing this page …</p>      </div>      <div id="dsq-share-step-3" class="dsq-share-step" style="display:none !important">        <p>Thanks! <a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" class="dsq-tooltip-decline" onclick="DISQUS.dtpl.actions.fire(&#39;thread.share.cancel&#39;); return false">Close</a></p>      </div>    </div>                                <div class="dsq-reply " id="dsq-reply">          <div id="dsq-account-dropdown">                  <a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" onclick="DISQUS.dtpl.actions.fire(&#39;auth.login&#39;); return false;">Login</a>              </div>      <h3>Add New Comment</h3>        <div class="dsq-avatar">              <img src="./Simple CSS vertical menu Digg-like_files/noavatar32.png">          </div>    <div class="dsq-textarea dsq-textarea-reply">      <div class="dsq-textarea-background">        <div class="dsq-textarea-wrapper" style="height: auto; ">          <!-- filled dynamically -->        <iframe name="easyXDM_DISQUS_net_default2402_provider" id="easyXDM_DISQUS_net_default2402_provider" scrolling="no" frameborder="0" src="./Simple CSS vertical menu Digg-like_files/reply.htm" style="height: 58px; "></iframe></div>                  <div id="dsq-media-preview" class="dsq-media-preview" style="display:none">          </div>                <div class="dsq-post-tools">          <ul>            <li class="dsq-post-as">                                <button type="button" class="dsq-button" onclick="DISQUS.dtpl.actions.fire(&#39;comments.validate&#39;, null, this);">                    Post as …                  </button>                          </li>                          <li class="dsq-attach-media">                <div class="dsq-attach-media-container">                  <span>Image</span>                  <!-- filled dynamically -->                <iframe name="easyXDM_DISQUS_net_default2403_provider" id="easyXDM_DISQUS_net_default2403_provider" scrolling="no" frameborder="0" src="./Simple CSS vertical menu Digg-like_files/upload.htm"></iframe></div>              </li>                        <li class="dsq-share-on dsq-clearfix">                            </li>          </ul>        </div>      </div>    </div>  </div>                              <div id="dsq-sort-by">    <select id="dsq-sort-select" onchange="DISQUS.dtpl.actions.fire(&#39;thread.sort&#39;, this.value);">              <option value="hot" selected="selected">          Sort by popular now        </option>              <option value="best">          Sort by best rating        </option>              <option value="newest">          Sort by newest first        </option>              <option value="oldest">          Sort by oldest first        </option>          </select>  </div>      <h3>            Showing <span id="dsq-num-posts">0</span> comments        </h3>        <ul id="dsq-comments">      </ul>        <div id="dsq-pagination">      <ul id="dsq-footer" class="dsq-clearfix">        <div id="dsq-subscribe">            <li>      <a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#" class="dsq-subscribe-email" onclick="return DISQUS.dtpl.actions.fire(&#39;thread.subscribe&#39;);">        <span class="dsq-font">M</span> <em>Subscribe by email</em>      </a>    </li>    <li>    <a href="http://woork.disqus.com/simple_css_vertical_menu_digg_like_12/latest.rss" class="dsq-subscribe-rss">      <span class="dsq-font">S</span> <em>RSS</em>    </a>  </li>    </div>  </ul>    </div>          <h3 class="dsq-h3-reactions">Reactions</h3>    <ul id="dsq-reactions" class="dsq-reactions dsq-clearfix">                <li id="dsq-reaction-21553190">    <div class="dsq-reaction-avatar dsq-avatar dsq-tt" data-dsq-content-id="dsq-reaction-tooltip-21553190">                    <a target="_blank" href="http://twitter.com/DiggRetweets/status/17134627533">                    <img src="./Simple CSS vertical menu Digg-like_files/default_profile_4_normal.png">                    </a>          </div>    <div id="dsq-reaction-tooltip-21553190" class="dsq-reaction-tooltip" style="display:none">      <div class="dsq-reaction-tooltip-container">        <div class="dsq-reaction-body">#DiggRT Simple CSS vertical menu Digg-like #webdesign #CSS #digg <a href="./Simple CSS vertical menu Digg-like_files/Simple CSS vertical menu Digg-like.htm">http://ow.ly/23GYK</a></div>        <div class="dsq-reaction-date">1 year ago</div>        <div class="dsq-reaction-user">@DiggRetweets</div>      </div>    </div>  </li>                <li id="dsq-reaction-21553191">    <div class="dsq-reaction-avatar dsq-avatar dsq-tt" data-dsq-content-id="dsq-reaction-tooltip-21553191">                    <a target="_blank" href="http://twitter.com/shikeb/status/17134422258">                    <img src="./Simple CSS vertical menu Digg-like_files/cecea6d0-b30a-449f-8f55-5bca8a5436d7_normal.png">                    </a>          </div>    <div id="dsq-reaction-tooltip-21553191" class="dsq-reaction-tooltip" style="display:none">      <div class="dsq-reaction-tooltip-container">        <div class="dsq-reaction-body">Simple CSS vertical menu Digg-like  #webdesign #CSS #digg <a href="./Simple CSS vertical menu Digg-like_files/Simple CSS vertical menu Digg-like.htm">http://ow.ly/23GYK</a></div>        <div class="dsq-reaction-date">1 year ago</div>        <div class="dsq-reaction-user">@shikeb</div>      </div>    </div>  </li>                <li id="dsq-reaction-21528420">    <div class="dsq-reaction-avatar dsq-avatar dsq-tt" data-dsq-content-id="dsq-reaction-tooltip-21528420">                    <a target="_blank" href="http://twitter.com/webEchoLess/status/17119682450">                    <img src="./Simple CSS vertical menu Digg-like_files/echoTwitterIcon_normal.png">                    </a>          </div>    <div id="dsq-reaction-tooltip-21528420" class="dsq-reaction-tooltip" style="display:none">      <div class="dsq-reaction-tooltip-container">        <div class="dsq-reaction-body">Nice &amp; simple #CSS vertical menu (Digg-like) <a href="./Simple CSS vertical menu Digg-like_files/Simple CSS vertical menu Digg-like.htm">http://ow.ly/17TK4X</a>  Very nice tutorial with download of source. #webdesign</div>        <div class="dsq-reaction-date">1 year ago</div>        <div class="dsq-reaction-user">@webEchoLess</div>      </div>    </div>  </li>                <li id="dsq-reaction-21528423">    <div class="dsq-reaction-avatar dsq-avatar dsq-tt" data-dsq-content-id="dsq-reaction-tooltip-21528423">                    <a target="_blank" href="http://twitter.com/Zeroner/status/17119080332">                    <img src="./Simple CSS vertical menu Digg-like_files/2962289ca2aab4817d36cb4d656d428e_1__normal.png">                    </a>          </div>    <div id="dsq-reaction-tooltip-21528423" class="dsq-reaction-tooltip" style="display:none">      <div class="dsq-reaction-tooltip-container">        <div class="dsq-reaction-body">RT @del_javascript: Simple CSS vertical menu Digg-like <a href="./Simple CSS vertical menu Digg-like_files/Simple CSS vertical menu Digg-like.htm">http://ow.ly/17TK4X</a></div>        <div class="dsq-reaction-date">1 year ago</div>        <div class="dsq-reaction-user">@Zeroner</div>      </div>    </div>  </li>                <li id="dsq-reaction-21528421">    <div class="dsq-reaction-avatar dsq-avatar dsq-tt" data-dsq-content-id="dsq-reaction-tooltip-21528421">                    <a target="_blank" href="http://twitter.com/del_javascript/status/17118977961">                    <img src="./Simple CSS vertical menu Digg-like_files/clouds2_normal.jpg">                    </a>          </div>      <div id="dsq-reaction-tooltip-21528421" class="dsq-reaction-tooltip" style="display:none !important">      <div class="dsq-reaction-tooltip-container">        <div class="dsq-reaction-body">Simple CSS vertical menu Digg-like <a href="./Simple CSS vertical menu Digg-like_files/Simple CSS vertical menu Digg-like.htm">http://ow.ly/17TK4X</a></div>        <div class="dsq-reaction-date">1 year ago</div>        <div class="dsq-reaction-user">@del_javascript</div>      </div>    </div></li>          </ul>                  <div class="dsq-trackback-url">      Trackback URL      <input onclick="this.select()" readonly="true" value="http://disqus.com/forums/woork/simple_css_vertical_menu_digg_like_12/trackback/">    </div>      </div><div id="fb-root" class=" fb_reset"><div style="position: absolute; top: -10000px; height: 0px; width: 0px; "><div><iframe id="fb_xdm_frame_http" name="fb_xdm_frame_http" src="./Simple CSS vertical menu Digg-like_files/xd_arbiter.htm"></iframe><iframe id="fb_xdm_frame_https" name="fb_xdm_frame_https" src="data:text/html,chromewebdata"></iframe></div><div><iframe id="f3e03e9d" name="f2d157dc98" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 240px; width: 575px; " class="FB_UI_Hidden" src="./Simple CSS vertical menu Digg-like_files/oauth.htm"></iframe></div></div></div><div>  </div></div>
<script src="./Simple CSS vertical menu Digg-like_files/embed.js" type="text/javascript"></script>
<noscript>&lt;a href='http://woork.disqus.com/?url=ref'&gt;View the discussion thread.&lt;/a&gt;</noscript>
<a class="dsq-brlink" href="http://disqus.com/">blog comments powered by <span class="logo-disqus">Disqus</span></a>
<div class="spacer" style="height:30px;"></div>
<dl id="comments-block" style="font-size:13px; color:#333333;">
<dt class="comment_auth" id="comment-4657066683560049442">
<a name="comment-4657066683560049442"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
I recently found your site. I like the tutorials, but you really should have online examples so we can see them in use without having to download.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-4657066683560049442" title="comment permalink">
January 18, 2008 4:58 PM
</a></span></dd>
<dt class="comment_auth" id="comment-5354970779615975191">
<a name="comment-5354970779615975191"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
To the commenter above -&gt; Or, you could just go to Digg where he clearly states this effect is found.<br><br>To the blogger -&gt; Good tutorial, thanks!
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-5354970779615975191" title="comment permalink">
January 21, 2008 8:06 AM
</a></span></dd>
<dt class="comment_auth" id="comment-1995860612305778777">
<a name="comment-1995860612305778777"></a>
Jason K.
said...
</dt>
<dd class="comment-body">
<p>
Hi Antonio, thanks for this post. I like your site. Have a nice day.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-1995860612305778777" title="comment permalink">
January 21, 2008 8:08 AM
</a></span></dd>
<dt class="comment_auth" id="comment-8849936991658905499">
<a name="comment-8849936991658905499"></a>
<a href="http://webbugtrack.blogspot.com/2007/11/bug-111-ie-broke-web-20.html" rel="nofollow">
xyz
</a>
said...
</dt>
<dd class="comment-body">
<p>
This works well, as long as you keep in mind that the menu will drop down over a portion of the screen.<br><br>That portion can NOT overlap a native HTML select list, or you will encounter issues in all versions of IE before v7.<br><br>See bug report #111 here:<br>http://webbugtrack.blogspot.com/2007/11/bug-111-ie-broke-web-20.html
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-8849936991658905499" title="comment permalink">
January 24, 2008 11:43 AM
</a></span></dd>
<dt class="comment_auth" id="comment-3606619679198995301">
<a name="comment-3606619679198995301"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
its nice, but the manu will not close when you click elsewhere on page
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-3606619679198995301" title="comment permalink">
February 12, 2008 12:50 AM
</a></span></dd>
<dt class="comment_auth" id="comment-4049817045695459480">
<a name="comment-4049817045695459480"></a>
<a href="http://www.blogger.com/profile/05512678940316321872" rel="nofollow">
Antonio
</a>
said...
</dt>
<dd class="comment-body">
<p>
@anonymous: no, to close it you have to click on the arrow :)
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-4049817045695459480" title="comment permalink">
February 12, 2008 1:16 AM
</a></span></dd>
<dt class="comment_auth" id="comment-7644811421289813544">
<a name="comment-7644811421289813544"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
Nice tutorial! You improve on it so that it degrades gracefully when javascript is turned off. i.e the menu automatically opens if javascript is disabled
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-7644811421289813544" title="comment permalink">
February 21, 2008 9:17 AM
</a></span></dd>
<dt class="comment_auth" id="comment-3762517951026626566">
<a name="comment-3762517951026626566"></a>
<a href="http://www.blogger.com/profile/02712874048812487369" rel="nofollow">
D
</a>
said...
</dt>
<dd class="comment-body">
<p>
great blog so far, but you should put  the examples on your site!<br><br>Also, fyi, I tried clicking your 'Woork Blog' logo to go back to your homepage, but it's not a link... Might wanna add that.. just a suggestion.. good day sir.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-3762517951026626566" title="comment permalink">
February 21, 2008 4:43 PM
</a></span></dd>
<dt class="comment_auth" id="comment-7869248420452106936">
<a name="comment-7869248420452106936"></a>
<a href="http://www.blogger.com/profile/12741972567061943907" rel="nofollow">
Al
</a>
said...
</dt>
<dd class="comment-body">
<p>
good but not doesn't align right on IE6
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-7869248420452106936" title="comment permalink">
March 11, 2008 6:29 AM
</a></span></dd>
<dt class="comment_auth" id="comment-8516725915501156276">
<a name="comment-8516725915501156276"></a>
schemogroby
said...
</dt>
<dd class="comment-body">
<p>
to me it seems like it doesn´t work in IE6 at all. thx anyway!
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-8516725915501156276" title="comment permalink">
March 19, 2008 4:15 AM
</a></span></dd>
<dt class="comment_auth" id="comment-4077877090366089089">
<a name="comment-4077877090366089089"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
hi how can i use this menu with frames?<br><br>i am using top frame and bottom frame.please help.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-4077877090366089089" title="comment permalink">
March 20, 2008 8:56 AM
</a></span></dd>
<dt class="comment_auth" id="comment-8205694509877428083">
<a name="comment-8205694509877428083"></a>
<a href="http://www.blogger.com/profile/13133466356763406330" rel="nofollow">
Ruff Edgz
</a>
said...
</dt>
<dd class="comment-body">
<p>
hey, love the tutorial and the example.<br><br>I did find however that when making multiple links, I found some problems that I thought would be good to tell you about.<br><br>I found that if you rapped the:<br><b>li</b> tags around the <b>ul class="submenu" id="sm_1"</b>. You can change the CSS for the <b>#middlebar ul .submenu</b> to have a position of "absolute" instead of "relative". This will help so when you want to make multiple links with this code, you don't have a problem with any collisions.<br><br>I also noticed that if you click on the link once and you click on another link, both menus stay up. I changed the 'show_layer.js' to look something like this:<br><br>var last_clicked="";<br><br>function showlayer(layer){<br> var myLayer=document.getElementById(layer);<br> <br> if (last_clicked==""){<br>  last_clicked=document.getElementById(layer);<br> }<br> <br> if((myLayer.style.display=="none" || myLayer.style.display=="") &amp;&amp; last_clicked.style.display=="block"){<br>  last_clicked.style.display="none";<br>  myLayer.style.display="block";<br>  last_clicked = myLayer;<br> } else if(myLayer.style.display=="none" || myLayer.style.display==""){<br>  myLayer.style.display="block";<br>  last_clicked = myLayer;<br> } else { <br>  myLayer.style.display="none";<br>  }<br>}<br><br>There is probably a easier way to do this but this is what I came up with. If one link submenu is open and you click on another link, it will close the previously clicked link and open the new links submenu.<br><br>I hope this makes sense and thanks again for the tutorial :D
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-8205694509877428083" title="comment permalink">
April 18, 2008 8:02 PM
</a></span></dd>
<dt class="comment_auth" id="comment-2684653259219857901">
<a name="comment-2684653259219857901"></a>
<a href="http://widgetsforfree.blogspot.com/" rel="nofollow">
John Smith
</a>
said...
</dt>
<dd class="comment-body">
<p>
I agree,<br>It would be pretty sweet if you had online examples. Maybe you should use another blogger blog.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-2684653259219857901" title="comment permalink">
May 10, 2008 7:43 AM
</a></span></dd>
<dt class="comment_auth" id="comment-7602625400747152660">
<a name="comment-7602625400747152660"></a>
PhilGill
said...
</dt>
<dd class="comment-body">
<p>
Can anybody claify how to use multiple buttons in a row across the bar. Much thanks to anyone who can.<br><br>Excellent post yet again Antonio :)
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-7602625400747152660" title="comment permalink">
May 27, 2008 9:15 AM
</a></span></dd>
<dt class="comment_auth" id="comment-568816950670852874">
<a name="comment-568816950670852874"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
Could you tell me how to add one more menu item?
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-568816950670852874" title="comment permalink">
May 29, 2008 8:42 AM
</a></span></dd>
<dt class="comment_auth" id="comment-5334788348704368759">
<a name="comment-5334788348704368759"></a>
<a href="http://www.blogger.com/profile/00625216198640257198" rel="nofollow">
Nikki
</a>
said...
</dt>
<dd class="comment-body">
<p>
Anonymous,<br><br>To add another menu item, copy and paste the code from Step 1 and make sure you change the 'sm_1' snippet (it's listed in there twice!) to 'sm_2', 'sm_3' so on and so forth for each additional menu item. Hope that helps!<br><br>ruff_edgz,<br><br>That code works great! Now if I could just get the menu to disappear when someone clicks on another part of the site....
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-5334788348704368759" title="comment permalink">
May 29, 2008 11:17 AM
</a></span></dd>
<dt class="comment_auth" id="comment-9073494500869664466">
<a name="comment-9073494500869664466"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
i think all in all the world would be a happier place without IE...the only place where bad things happen to good code
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-9073494500869664466" title="comment permalink">
June 6, 2008 6:19 AM
</a></span></dd>
<dt class="comment_auth" id="comment-2203987943495296728">
<a name="comment-2203987943495296728"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
To make it go away when you click anywhere, and not jsut the same link again, add: <br><br>onblur="javascript:showlayer('sm_1')"<br><br>to the link.  Also, I removed the height: auto from the .submenu li a as it was buggy in IE7.<br><br>cheers!
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-2203987943495296728" title="comment permalink">
June 25, 2008 11:32 AM
</a></span></dd>
<dt class="comment_auth" id="comment-1255463045806323483">
<a name="comment-1255463045806323483"></a>
<a href="http://www.bluecirclemedia.com/" rel="nofollow">
Blue Circle Media
</a>
said...
</dt>
<dd class="comment-body">
<p>
Awesome tutorial! I'm a huge fan of digg, so this is right up my alley.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-1255463045806323483" title="comment permalink">
June 27, 2008 7:20 PM
</a></span></dd>
<dt class="comment_auth" id="comment-1177249094019054889">
<a name="comment-1177249094019054889"></a>
<a href="http://www.blogger.com/profile/11914641222989651697" rel="nofollow">
Kendrick
</a>
said...
</dt>
<dd class="comment-body">
<p>
great script, just doesn't work worth a crap in IE6
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-1177249094019054889" title="comment permalink">
July 3, 2008 10:55 PM
</a></span></dd>
<dt class="comment_auth" id="comment-6550797352479855259">
<a name="comment-6550797352479855259"></a>
potty
said...
</dt>
<dd class="comment-body">
<p>
ciao antonio!<br><br>ho fatto una prova del tuo menu css ma no funziona molto benne sopra IE 7 <br><br>:(  sai che cosa sucede?  mi piace tantísimo il tuo menu css like digg mà non so perche sopra IE 7 puoi guardare questo:<br><br><br>http://s2.subirimagenes.com/otros/previo/thump_732851digg.jpg<br><br><br><br>grazie mille!  e scusate ma il mio italiano ancora non è troppo bueno.<br><br>ciao!
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-6550797352479855259" title="comment permalink">
July 7, 2008 2:53 PM
</a></span></dd>
<dt class="comment_auth" id="comment-6217613635769924018">
<a name="comment-6217613635769924018"></a>
Sally
said...
</dt>
<dd class="comment-body">
<p>
Nice header. :)
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-6217613635769924018" title="comment permalink">
July 10, 2008 6:18 AM
</a></span></dd>
<dt class="comment_auth" id="comment-2240979058561494498">
<a name="comment-2240979058561494498"></a>
<a href="http://onefiftyeightdesign.com/" rel="nofollow">
Chris
</a>
said...
</dt>
<dd class="comment-body">
<p>
Cool. I was looking for something like this.<br><br>Works well in FF, but screwy in IE7.<br><br>I'm using it as a vertical menu, like this:<br><br>HOME<br>ABOUT<br>CONTACT<br><br>The subheads expand, but everything else should move down, but it doesn't. The submenu just expands above the rest of the text. Any ideas?
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-2240979058561494498" title="comment permalink">
July 10, 2008 11:28 AM
</a></span></dd>
<dt class="comment_auth" id="comment-553151856285048970">
<a name="comment-553151856285048970"></a>
Chris
said...
</dt>
<dd class="comment-body">
<p>
^^^ Nevermind. Got it working!<br><br>Thanks again for the tutorial!
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-553151856285048970" title="comment permalink">
July 10, 2008 12:19 PM
</a></span></dd>
<dt class="comment_auth" id="comment-8948284432759812364">
<a name="comment-8948284432759812364"></a>
eric
said...
</dt>
<dd class="comment-body">
<p>
The Javascript seems to make IE6 angry (don't ask why I'm doing something for IE6, haha). Something in this line: <br><br>if(myLayer.style.display=="none" || myLayer.style.display==""){<br><br>I'm not very knowledgeable with Javascript. Could you help me out?
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-8948284432759812364" title="comment permalink">
July 29, 2008 2:01 PM
</a></span></dd>
<dt class="comment_auth" id="comment-5500257331063720156">
<a name="comment-5500257331063720156"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
Not only will the menu not close when you click somewhere else on the page, the overall functionality that you attempted to mirror is far off from what digg.com implements.<br><br>You have 2 options for each of these links:<br>1. Click the text-link to go to that page -OR-<br>2. Click on the down arrow to display the menu.<br><br>Your script displays the menu in both cases (text and down-arrow).<br><br>This is not a solution.<br><br>Thanks for trying though.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-5500257331063720156" title="comment permalink">
August 6, 2008 7:20 AM
</a></span></dd>
<dt class="comment_auth" id="comment-997423306686005365">
<a name="comment-997423306686005365"></a>
<a href="http://www.blogger.com/profile/16741682040787366481" rel="nofollow">
elvisparsley
</a>
said...
</dt>
<dd class="comment-body">
<p>
Can you make this by onhover rather than onclick?<br><br>I want to see sub-menu when I hover one of main menu.<br>Thanks.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-997423306686005365" title="comment permalink">
August 30, 2008 8:58 AM
</a></span></dd>
<dt class="comment_auth" id="comment-3022676244358128459">
<a name="comment-3022676244358128459"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
Could someone please past the html code in this blog for me so i can have two links on the same bar and not just the "profile" menu.<br><br>Thanks
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-3022676244358128459" title="comment permalink">
September 13, 2008 12:34 PM
</a></span></dd>
<dt class="comment_auth" id="comment-6665866143298030653">
<a name="comment-6665866143298030653"></a>
Anonymous
said...
</dt>
<dd class="comment-body">
<p>
Thanks for the tutorial i'm having a tough time getting more than 2 sub menus to show up why is that? the menu items stack on top of them self.<br><br>can some one send me a working copy or show me a tutorial with it?
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-6665866143298030653" title="comment permalink">
October 9, 2008 2:53 AM
</a></span></dd>
<dt class="comment_auth" id="comment-5513788282970575436">
<a name="comment-5513788282970575436"></a>
<a href="http://www.blogger.com/profile/09152146657632553240" rel="nofollow">
DesignBro
</a>
said...
</dt>
<dd class="comment-body">
<p>
This is my jQuery approach to do this Digg effect. I am sorry if putting url is not allowed. :)<br><br>http://customthemedesign.com/digg-menu/
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-5513788282970575436" title="comment permalink">
October 17, 2008 2:47 AM
</a></span></dd>
<dt class="comment_auth" id="comment-6106674695798376456">
<a name="comment-6106674695798376456"></a>
<a href="http://www.blogger.com/profile/02105862637553915621" rel="nofollow">
Elisabeth
</a>
said...
</dt>
<dd class="comment-body">
<p>
Ciao! <br>I have done everything you said to do and I still have a menu bar which has  a few design problems. Perhaps you could see how to fix this? There is also a small problem in IE7 as you will see. <br>On click the layer which is exposed  seems too big or too long so the rest of the menu items move under the navigation bar. <br>Check the problems at <br>http://www.dolcevia.com/navigation/navigation.html   <br>The styles are navigation.css in the same folder. <br>Thanks!!
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-6106674695798376456" title="comment permalink">
November 17, 2008 5:36 AM
</a></span></dd>
<dt class="comment_auth" id="comment-165396913723395440">
<a name="comment-165396913723395440"></a>
<a href="http://www.blogger.com/profile/16736682369851824237" rel="nofollow">
KenFX Studios
</a>
said...
</dt>
<dd class="comment-body">
<p>
Great tutorial.<br><br>Anybody knows how to integrate that with a WordPress category drop down list? What PHP page will I need to modify?<br><br>thank you in advance.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-165396913723395440" title="comment permalink">
January 27, 2009 7:00 AM
</a></span></dd>
<dt class="comment_auth" id="comment-2402620073694261791">
<a name="comment-2402620073694261791"></a>
<a href="http://www.raycreationsindia.com/" rel="nofollow">
Suparna
</a>
said...
</dt>
<dd class="comment-body">
<p>
I have used this CSS vertical menu code and it works perfectly.<br>Thank you very much for sharing this tutorial with us.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-2402620073694261791" title="comment permalink">
February 8, 2009 2:36 AM
</a></span></dd>
<dt class="comment_auth" id="comment-6789364686399017197">
<a name="comment-6789364686399017197"></a>
<a href="http://www.autoquoter.com/" rel="nofollow">
Emil
</a>
said...
</dt>
<dd class="comment-body">
<p>
Antonio,<br><br>First of all I would like to thank you for such nice tutorial, very easy to understand and true web 2.0 css style.<br><br>I will use it on my Wordpress Theme.<br><br>Thanks,<br>Emil
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-6789364686399017197" title="comment permalink">
February 22, 2009 2:39 PM
</a></span></dd>
<dt class="comment_auth" id="comment-9212144960068498464">
<a name="comment-9212144960068498464"></a>
<a href="http://www.blogger.com/profile/05845729934526720420" rel="nofollow">
68cuda
</a>
said...
</dt>
<dd class="comment-body">
<p>
Good post. Thanks!
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-9212144960068498464" title="comment permalink">
May 7, 2009 6:37 AM
</a></span></dd>
<dt class="comment_auth" id="comment-8954896729268924509">
<a name="comment-8954896729268924509"></a>
<a href="http://www.blogger.com/profile/06008636271126402065" rel="nofollow">
frank
</a>
said...
</dt>
<dd class="comment-body">
<p>
Would it be possible to build the menu from the bottom to the top. So first item on the bottom of its containing div. Like in a horizontal float right, will build the menu fro right to left. I need that vertically from botton to top.
</p>
</dd>
<dd class="comment-footer">
<span class="comment-time">
<a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html#comment-8954896729268924509" title="comment permalink">
June 15, 2009 3:42 AM
</a></span></dd>
</dl>
</div>
<!-- google_ad_section_end -->
</div>
<div class="blog-pager" id="blog-pager">
<a class="blog-pager-newer-link" href="http://woork.blogspot.com/2008/01/mootools-animated-sidebar-menu.html" id="Blog1_blog-pager-newer-link" title="Newer Post">
Newer Post
</a>
<a class="blog-pager-older-link" href="http://woork.blogspot.com/2008/01/add-dzone-button-on-blogger-template.html" id="Blog1_blog-pager-older-link" title="Older Post">
Older Post
</a>
<a class="home-link" href="http://woork.blogspot.com/">
Home
</a>
</div>
<div class="clear"></div>
</div></div>
</div></td>
<td background="./Simple CSS vertical menu Digg-like_files/html-5-visual-cheat-sheet-by-woork.html" valign="top" width="250">
<div id="searchform">
<form action="http://woork.blogspot.com/search" method="get">
<input id="search-box" name="q" type="text" value="Search...">
<input alt="Search" id="search-submit" src="./Simple CSS vertical menu Digg-like_files/search.gif" type="image">
<input name="max-results" type="hidden" value="6">
</form></div>
<div class="welcome"></div>
<div class="list_section" id="intro" style="margin-bottom:10px;">
<ul id="intro-ul"><li class="intro-twitter"><strong>Twitter</strong>
<a href="http://twitter.com/woork">Follow</a> woork on Twitter </li>
<li class="intro-feed"><strong>RSS Feed</strong>
<a href="http://feeds2.feedburner.com/Woork">Subscribe</a> to stay up to date</li>
<li class="intro-podcast"><strong>Podcast</strong> Coming soon...</li>
<li class="intro-delicious" style="border-bottom:none;">
<table border="0" cellpadding="0" cellspacing="0" height="28" width="228">
<tbody><tr>
<td width="46px">
</td>
<td valign="bottom">
<b class="big-number" id="delicious-b">3052</b> delicious lovers
<a href="http://del.icio.us/post?url=http://woork.blogspot.com&title=woork%20|%20Antonio%20Lupetti%20Personal%20Blog%20about%20Tech,%20Web,%20Programming%20and%20Design" target="_blank">save</a>
<script type="text/javascript">
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById("delicious-b").innerHTML = urlinfo.total_posts;
}
</script>
<script src="./Simple CSS vertical menu Digg-like_files/data"></script></td>
</tr>
</tbody></table>
</li>
</ul>
</div>
<div style="margin-bottom:20px;">
<a href="http://feeds2.feedburner.com/Woork"><img alt="" height="26" src="./Simple CSS vertical menu Digg-like_files/Woork" style="border:0" width="88"></a>
</div>
<div class="wnew"><span class="feed-small-right"><a href="http://feeds2.feedburner.com/Woork">Subscribe</a></span></div>
<div class="list_section" style="padding-bottom:0; border-top:none;">
<script src="./Simple CSS vertical menu Digg-like_files/Woork(1)" type="text/javascript"></script><div class="feedburnerFeedBlock" id="Woork6j9i6k59v0g3vioir1cq4q80js"><ul><li><span class="headline"><a href="http://woorkup.com/2012/04/22/facebook-instagram-vittime-illustri/">Le vittime “illustri” del patto Facebook-Instagram</a></span></li><li><span class="headline"><a href="http://woorkup.com/2012/04/15/linvoluzione-del-web-come-google-e-facebook-stanno-cambiando-la-rete-e-le-nostre-abitudini/">L’involuzione del Web: come Google e Facebook stanno cambiando la rete e le nostre abitudini</a></span></li><li><span class="headline"><a href="http://woorkup.com/2012/03/23/nuovo-ipad-potete-farne-a-meno/">Nuovo iPad: perché potete farne tranquillamente a meno</a></span></li><li><span class="headline"><a href="http://woorkup.com/2012/03/20/twitter-la-grande-menzogna/">Twitter: la grande menzogna</a></span></li><li><span class="headline"><a href="http://woorkup.com/2012/03/15/google-uccide-innovazione-advertising-company/">Google ha ucciso l’innovazione: ora è solo una advertising company</a></span></li><li><span class="headline"><a href="http://woorkup.com/2012/03/12/yahoo-avvia-unazione-legale-contro-facebook-per-violazione-dei-propri-brevetti/">Yahoo! avvia un’azione legale contro Facebook per violazione dei propri brevetti</a></span></li><li><span class="headline"><a href="http://woorkup.com/2012/03/09/instagram-android-lancio-marzo-sxsw/">INSTABOOM! Instagram per Android: a 48 ore dal lancio. Forse…</a></span></li><li><span class="headline"><a href="http://woorkup.com/2012/02/20/interview-with-brian-solis/">Exclusive Interview with Brian Solis: Social Influence, Content Curation and Future of Social Media</a></span></li></ul> <div id="creditfooter"><a href="http://www.feedburner.com/" target="_blank"><img src="./Simple CSS vertical menu Digg-like_files/buzzboost-pwrd.gif" alt="Headlines by FeedBurner" style="border:0"></a></div></div>
</div>
<div class="section" id="addsections"></div>
<div class="hotlinks"><span class="feed-small-right"><a href="http://feeds2.feedburner.com/Woork">Subscribe</a></span></div>
<div class="list_section" style="border-top:none;">
<div class="spacer"></div>
<ul style="margin:0; padding:0; border:0;">
<li><a href="http://woork.blogspot.com/2009/01/woork-handbook.html">The Woork Handbook</a></li>
<li><a href="./Simple CSS vertical menu Digg-like_files/html-5-visual-cheat-sheet-by-woork.html">HTML 5 Visual Cheat Sheet </a></li>
<li><a href="http://woork.blogspot.com/2009/06/super-simple-way-to-work-with-twitter.html">Super simple way to work with Twitter API (PHP + CSS)</a></li>
<li><a href="http://woork.blogspot.com/2009/01/structured-process-you-must-know-to.html">Structured process you must know to develop a web application</a></li>
<li><a href="http://woork.blogspot.com/2009/01/beautiful-datepickers-and-calendars-for.html">Beautiful datepickers and calendars for web developers</a></li>
<li><a href="http://woork.blogspot.com/2008/09/10-fonts-to-design-original-logos.html">10 Fonts to design original logos</a></li>
</ul>
</div>
<div class="cgoogle"></div>
<!-- Include the Google Friend Connect javascript library. -->
<script src="./Simple CSS vertical menu Digg-like_files/friendconnect.js" type="text/javascript"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1231180872818" style="width: auto; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(204, 204, 204); border-right-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-image: initial; visibility: visible; " class="gadgets-gadget-container"><div id="gfc_iframe_480720304_0_body"><iframe id="gfc_iframe_480720304_0" name="gfc_iframe_480720304_0" style="width:100%;" frameborder="0" scrolling="no" allowtransparency="true"></iframe></div></div>
<div class="spacer" style="margin-bottom:20px;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '240';
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#EFEFEF';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#185D99';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#185D99';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#999';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-1231180872818',
site: '03470848075554627603'},
skin);
</script>
<div class="nftw"><span class="feed-small-right"><a href="http://feeds2.feedburner.com/Woork">Subscribe</a></span></div>
<div class="list_section" style="border-top:none;">
<div class="spacer"></div>
<div class="design_news">
<script src="./Simple CSS vertical menu Digg-like_files/woork_news" type="text/javascript"></script>
</div>
<div class="small-txt">
<strong>Share your links.</strong> 
Do you want to suggest any interesting link about web design or tech news? Submit your link.      </div>
<a class="b-spacer" href="http://woork.blogspot.com/2009/02/add-design-news-on-woork.html">
<img alt="Submit a News" border="0" src="./Simple CSS vertical menu Digg-like_files/submit.png">
</a>
</div></td>
<td valign="top" width="135"><table border="0" cellpadding="0" cellspacing="0" width="135">
<tbody><tr>
<td align="right" height="135" valign="top"><div style="margin-top:20px; padding-left:12px;">
<div class="section" id="addsectionssidebar"><div class="widget HTML" id="HTML1">
<div class="widget-content">
<script type="text/javascript"><!--
google_ad_client = "pub-9932209926421067";
google_ad_host = "pub-1556223355139109";
google_ad_host_channel="00000+00031+00005+00302";
/* 120x600, creato 25/06/09 */
google_ad_slot = "2892434882";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script src="./Simple CSS vertical menu Digg-like_files/show_ads.js" type="text/javascript">
</script><ins style="display:inline-table;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:120px"><ins id="aswift_2_anchor" style="display:block;border:none;height:600px;margin:0;padding:0;position:relative;visibility:visible;width:120px"><iframe allowtransparency="true" frameborder="0" height="600" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){i+=&#39;.call&#39;;setTimeout(h,0)}else if(h.match){i+=&#39;.nav&#39;;w.location.replace(h)}s.log&amp;&amp;s.log.push(i)}" scrolling="no" vspace="0" width="120" id="aswift_2" name="aswift_2" style="left:0;position:absolute;top:0;"></iframe></ins></ins>
</div>
</div></div></div></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div><div id="container-footer">
<div id="footer">
<a class="b-spacer" href="http://woork.blogspot.com/"><img border="0" height="36" src="./Simple CSS vertical menu Digg-like_files/woork-down.jpg" width="97"></a>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td style="padding-right:30px;" valign="top" width="33%"><h1>About the Author </h1>
<img class="profile_img" height="48" src="./Simple CSS vertical menu Digg-like_files/antoniolupetti.png" width="48">
I am <a href="http://www.facebook.com/profile.php?id=709734006"><strong>Antonio Lupetti</strong></a>, 
Engineer, Pro Blogger, Mac User, Web addicted.
I live in Rome, ITALY.
<div class="spacer"></div>
<ul>
<li><a href="mailto:antonio.lupetti@gmail.com">Send me an e-mail</a></li>
<li><a href="http://www.facebook.com/antoniolupetti" rel="nofollow">Facebook</a></li>
<li><a href="http://twitter.com/Woork" rel="nofollow">Twitter</a></li>
<li><a href="http://friendfeed.com/woork" rel="nofollow">FriendFeed</a></li>
<li><a href="http://technorati.com/people/technorati/drhouse" rel="nofollow">Technorati</a></li>
</ul>
<img class="b-spacer" height="57" src="./Simple CSS vertical menu Digg-like_files/twblogo.jpg" width="71"></td>
<td class="central-p" valign="top" width="33%">
<h1>Publications</h1>
<ul>
<li><a href="http://woork.blogspot.com/2009/09/jquery-visual-cheat-sheet.html">jQuery 1.3 Visual Cheat Sheet</a></li>
<li><a href="http://woork.blogspot.com/2009/01/woork-handbook.html">The Woork Handbook</a></li>
</ul>
<h1>Subscriptions</h1>
<ul>
<li><a href="http://feeds2.feedburner.com/Woork">Subscribe to  RSS feed </a></li>
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=Woork" rel="nofollow">Subscribe to RSS feed via e-mail </a></li>
</ul>
</td>
<td style="padding-left:30px;" valign="top" width="33%">
<h1>Friends and Supporters</h1>
<ul>
<li><a href="http://briancray.com/" rel="nofollow">Brian Cray</a></li>
<li><a href="http://mayhemstudios.com/blog/" rel="nofollow">Calvin Lee</a></li>
<li><a href="http://www.gracesmith.co.uk/" rel="nofollow">Grace Smith</a></li>
<li><a href="http://imjustcreative.com/imjustcreative-twitter-landing-zone/2008/12/11/" rel="nofollow">Graham Smith</a></li>
<li><a href="http://cssglobe.com/" rel="nofollow">CSS Globe</a></li>
<li><a href="http://www.smashingmagazine.com/" rel="nofollow">Smashing Magazine</a></li>
</ul>
<div class="spacer"></div>
<div class="powered-blogger">Powered by <a href="http://www.blogger.com/" rel="nofollow">Blogger</a></div>
Mobile version powered by <a href="http://mobify.me/">Mobify.me</a>
</td>
</tr>
</tbody></table>
<div id="footer-botton"> 2009 woork | All rights reserved
<div style="display:none">
<!-- MyBlogLog -->
<script src="./Simple CSS vertical menu Digg-like_files/jsserv.php" type="text/javascript"></script>
<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=3032812; 
var sc_invisible=0; 
var sc_partition=33; 
var sc_security="0cd8a91c"; 
</script>
<script src="./Simple CSS vertical menu Digg-like_files/counter_xhtml.js" type="text/javascript"></script><span class="statcounter"><a class="statcounter" href="http://www.statcounter.com/" target="_blank"><img src="./Simple CSS vertical menu Digg-like_files/t.php" alt="StatCounter - Free Web Tracker and Counter" border="0"></a></span>

<noscript>
&lt;div class='statcounter'&gt;&lt;a class='statcounter' href='http://www.statcounter.com/'&gt;
&lt;img alt='hit counter' class='statcounter' src='http://c34.statcounter.com/3032812/0/0cd8a91c/0/'/&gt;&lt;/a&gt;&lt;/div&gt;
</noscript>
</div></div>
</div>
</div>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script><script type="text/javascript" src="./Simple CSS vertical menu Digg-like_files/2121586095-widgets.js"></script>
<script type="text/javascript">
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8903834426366267848';BLOG_attachCsiOnload('item_'); }_WidgetManager._Init('http://www.blogger.com/rearrange?blogID\x3d8903834426366267848','http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html','8903834426366267848');
_WidgetManager._SetPageActionUrl('http://www.blogger.com/display?blogID\x3d8903834426366267848','APq4FmBFniZA0JSPIiXFBqH8NN7VM3KNI07Obc6Z7-ettL4PY3GGuPDPkFIH3x02MDwH35dUayCAPmD8-WDJXAt6Cqj3w35JrJMxmQdNUyZxAc89-OFmm-U\x3d','AOuZoY4oFrvrSnrW44w7f59iIxru_OizHg:1335598901080');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'bloggerUrl': 'http://www.blogger.com', 'title': 'Woork', 'pageType': 'item', 'url': 'http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html', 'canonicalUrl': 'http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html', 'canonicalHomepageUrl': 'http://woork.blogspot.com/', 'homepageUrl': 'http://woork.blogspot.com/', 'blogspotFaviconUrl': 'http://woork.blogspot.com/favicon.ico', 'enabledCommentProfileImages': true, 'searchLabel': '', 'searchQuery': '', 'pageName': 'Simple CSS vertical menu Digg-like', 'pageTitle': 'Woork: Simple CSS vertical menu Digg-like', 'encoding': 'UTF-8', 'locale': 'en-US', 'isPrivate': false, 'isMobile': false, 'mobileClass': '', 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42Woork - Atom\42 href\75\42http://woork.blogspot.com/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42Woork - RSS\42 href\75\42http://woork.blogspot.com/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42Woork - Atom\42 href\75\42http://www.blogger.com/feeds/8903834426366267848/posts/default\42 /\76\n\74link rel\75\42EditURI\42 type\75\42application/rsd+xml\42 title\75\42RSD\42 href\75\42http://www.blogger.com/rsd.g?blogID\758903834426366267848\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42Woork - Atom\42 href\75\42http://woork.blogspot.com/feeds/3245083572946605987/comments/default\42 /\76\n', 'meTag': '', 'openIdOpTag': '', 'postImageThumbnailUrl': 'http://2.bp.blogspot.com/_TqPdHmAEwTM/R5E6dtOYBmI/AAAAAAAAAts/wAUoo7yJAho/s72-c/menu1.png', 'imageSrcTag': '\74link rel\75\42image_src\42 href\75\42http://2.bp.blogspot.com/_TqPdHmAEwTM/R5E6dtOYBmI/AAAAAAAAAts/wAUoo7yJAho/s72-c/menu1.png\42 /\76\n', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var a\75window;function c(b){this.t\75{};this.tick\75function(b,i,d){d\75void 0!\75d?d:(new Date).getTime();this.t[b]\75[d,i]};this.tick(\42start\42,null,b)}var f\75new c;a.jstiming\75{Timer:c,load:f};try{var g\75null;a.chrome\46\46a.chrome.csi\46\46(g\75Math.floor(a.chrome.csi().pageT));null\75\75g\46\46a.gtbExternal\46\46(g\75a.gtbExternal.pageT());null\75\75g\46\46a.external\46\46(g\75a.external.pageT);g\46\46(a.jstiming.pt\75g)}catch(h){};a.tickAboveFold\75function(b){var e\0750;if(b.offsetParent){do e+\75b.offsetTop;while(b\75b.offsetParent)}b\75e;750\76\75b\46\46a.jstiming.load.tick(\42aft\42)};var j\75!1;function k(){j||(j\75!0,a.jstiming.load.tick(\42firstScrollTime\42))}a.addEventListener?a.addEventListener(\42scroll\42,k,!1):a.attachEvent(\42onscroll\42,k);\n })();\74/script\076', 'mobileHeadScript': '', 'adsenseClientId': 'pub-9932209926421067', 'analyticsAccountNumber': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/f75e48f708466c7f/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/b8f4953a48a6764f'}}, {'name': 'skin', 'data': {'vars': {}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '/?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '/?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '/?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '/?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '/?view\75timeslide'}}}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'addsectionssidebar', null, document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main_s', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'http://www.blogger.com/static/v1/jsbin/1818731363-lbx.js', 'lightboxCssUrl': 'http://www.blogger.com/static/v1/v-css/3397631820-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar'));
</script>

<iframe name="easyXDM_DISQUS_net_default2401_provider" id="easyXDM_DISQUS_net_default2401_provider" style="position: absolute; top: -2000px; left: 0px; " frameborder="0" src="./Simple CSS vertical menu Digg-like_files/def.htm"></iframe><div class="dsq-tooltip-outer dsq-tooltip-big" style="position: absolute; z-index: 9999; display: block; top: 3702px; left: 398px; opacity: 0.96; visibility: hidden; background-position: 18px 100%; "><div class="dsq-tooltip dsq-cleanslate">  <div class="dsq-tooltip-notch"></div>  <div class="dsq-tooltip-inner"></div></div></div></body></html>